Carousel

Published on February 12, 2021, updated on March 22, 2024

Element: <ins-carousel>

Defines all direct child div of the binded element as a slide

Complete Example

Code Snippet

<ins-carousel 
  layout="1"
  heading="Carousel heading"
  body-text="This is a sample content."
  sub-heading="This is a sub heading"
  cta-label="CTA BUTTON" cta-link="/web-components/v2-carousel" bind-to="myCarousel"
  tooltip="This is a sample tooltip content. It also support html content.">

  <div id="myCarousel">

    <div class="img-wrap">
      <img src="/assets/slider/1.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/2.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/3.jpeg" alt="sliders" />
    </div>

  </div>

</ins-carousel>

Layout 2

Code Snippet

<style>
  .ins-carousel.layout-2 {
    margin-bottom: 30px;
  }

  .ins-carousel.layout-2 h1,
  .ins-carousel.layout-2 h2,
  .ins-carousel.layout-2 p {
    color: #fff;
  }

  #myCarousel2 {
    max-height: 400px;
  }

  #myCarousel2 .img-wrap {
    width: 100%;
    height: 600px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0.5);
  }

  #myCarousel2 .img-wrap.one {
    background-image: url('/assets/slider/1.jpeg');
  }

  #myCarousel2 .img-wrap.two {
    background-image: url('/assets/slider/2.jpeg');
  }

  #myCarousel2 .img-wrap.three {
    background-image: url('/assets/slider/3.jpeg');
  }
</style>

<ins-carousel 
  layout="2"
  height="400px"
  heading="Carousel heading"
  body-text="Carousel Body Text"
  sub-heading="Carousel Sub Heading"
  cta-label="CTA BUTTON"
  cta-link="/#/app/other/slider"
  bind-to="myCarousel2">

  <div id="myCarousel2">
    <div class="img-wrap one"></div>
    <div class="img-wrap two"></div>
    <div class="img-wrap three"></div>
  </div>

</ins-carousel>

Layout 3

Code Snippet

<style>
  #myCarousel3 .img-wrap img {
    object-fit: cover;
    height: 520px;
  }
</style>


<ins-carousel layout="3" 
  heading="Carousel heading"
  body-text="This is a sample content."
  sub-heading="This is a sub heading" 
  cta-label="CTA BUTTON"
  cta-link="/web-components/v2-carousel" 
  bind-to="myCarousel3">

  <div id="myCarousel3">
    <div class="img-wrap">
      <img src="/assets/slider/1.jpeg" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/2.jpeg" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/3.jpeg" />
    </div>
  </div>

</ins-carousel>

Loop

Code Snippet

<ins-carousel 
  loop
  bind-to="myCarousel4">

    <div id="myCarousel4">

    <div class="img-wrap">
      <img src="/assets/slider/1.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/2.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/3.jpeg" alt="sliders" />
    </div>

  </div>

</ins-carousel>

Autoplay

Code Snippet

<ins-carousel 
  autoplay
  bind-to="myCarousel5">
  
    <div id="myCarousel5">
    <div class="img-wrap">
      <img src="/assets/slider/1.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/2.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/3.jpeg" alt="sliders" />
    </div>
  </div>
  
</ins-carousel>

Autoplay + Loop

Code Snippet

<ins-carousel 
  autoplay loop
  bind-to="myCarousel6">

    <div id="myCarousel6">

    <div class="img-wrap">
      <img src="/assets/slider/1.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/2.jpeg" alt="sliders" />
    </div>

    <div class="img-wrap">
      <img src="/assets/slider/3.jpeg" alt="sliders" />
    </div>

  </div>

</ins-carousel>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
heading	string	-	-	Defines the heading of the carousel
sub-heading	string	-	-	Defines the sub heading of the carousel
body-text	string	-	-	Defines the body of text of the carousel
cta-label	string	-	-	Defines the CTA button label of the carousel
cta-link	string	-	-	Defines the CTA button link of the carousel
cta-link-target	string	_blank	_blank, _self, _parent, _top, framename	Defines where the CTA link should open
cta-color	string	-	Insites Colors	Defines the CTA button color of the carousel
cta-disabled	string	-	-	Defines disabled state of the CTA button
layout	number	1	1, 2, 3	Defines the layout of the carousel
width	string	100%	CSS Valid Units	Defines the width of the carousel
height	string	auto	CSS Valid Units	Defines the height of the carousel
bind-to	string	-	Required	Defines the element wrapper to bind the carousel. All direct child of this element will become the carousel's slides.
start-index	number	0	-	Defines where the carousel should start upon load
transition	number	350	-	Defines the transition speed of the carousel
duration	number	3000	-	Defines the duration speed of the carousel
autoplay	boolean	false	true, false	Defines if the carousel should automatically slide
loop	boolean	false	true, false	Defines if the carousel should loop the slides
drag-disabled	boolean	false	true, false	Defines if the carousel should be draggable
per-page	number	1	-	Defines how many slides should show per page
no-carousel-button	boolean	false	true, false	Defines if the carousel should have prev and next buttons
no-pagination	boolean	false	true, false	Defines if the carousel should have pagination buttons

Events

EVENT	OBJECT	DESCRIPTION
insSlide	click/drag event	Emits an event when the slide changes

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.