Carousel

Here you can find simple carousel examples and usage instructions. For further carousel documentation please visit Swiper docs

Simple Carousel

image
Read More
image
Read More
image
Read More
image
Read More
image
Read More
<div class="swiper-container mb-10" data-margin="30" data-nav="true" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->

Card Carousel

Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.

Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.

Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.

Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.

<div class="swiper-container dots-closer blog grid-view !mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="item-inner">
          <article>
            <div class="card">
              <div class="card-body">
                ...
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </article>
          <!-- /article -->
        </div>
        <!-- /.item-inner -->
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        <div class="item-inner">
          <article>
            <div class="card">
              <div class="card-body">
                ...
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </article>
          <!-- /article -->
        </div>
        <!-- /.item-inner -->
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        <div class="item-inner">
          <article>
            <div class="card">
              <div class="card-body">
                ...
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </article>
          <!-- /article -->
        </div>
        <!-- /.item-inner -->
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        <div class="item-inner">
          <article>
            <div class="card">
              <div class="card-body">
                ...
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </article>
          <!-- /article -->
        </div>
        <!-- /.item-inner -->
      </div>
      <!--/.swiper-slide -->
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->

Text Slider

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.

<div class="swiper-container dots-closer !text-center !mb-6" data-margin="30" data-dots="true">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        ...
      </div>
      <!--/.swiper-slide -->
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->

Image Slider

Remove .dots-over class to move bullets below the images.

Use any available .m-*, .p-*, .bg-* and .text-* helper class to style and place the captions. You can change their placement with the help of flex classes as well.

Use animate.css animation and utility classes to add animations and delays to captions.

For hero slider (slider with fixed height and background cover images) with captions example check out Demo 15

image
Vivamus sagittis lacus augue
image
Vivamus sagittis lacus augue
image
<div class="swiper-container dots-over" data-margin="5" data-dots="true" data-nav="true" data-autoheight="true">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide bg-overlay bg-overlay-400 rounded">
        <img src="./assets/img/photos/is1.jpg" alt="" />
        <div class="caption-wrapper p-14">
          <div class="caption bg-[rgba(255,255,255)] opacity-100 rounded px-4 py-3 mt-auto animate__animated animate__slideInDown animate__delay-1s"><h5 class="mb-0">Caption</h5></div>
          <!--/.caption -->
        </div>
        <!--/.caption-wrapper -->
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide rounded">
        <img src="./assets/img/photos/is2.jpg" alt="" />
        <div class="caption-wrapper p-14">
          <div class="caption bg-[rgba(255,255,255)] opacity-100 rounded px-4 py-3 !mx-auto mt-auto animate__animated animate__slideInDown animate__delay-1s"><h5 class="mb-0">Caption</h5></div>
          <!--/.caption -->
        </div>
        <!--/.caption-wrapper -->
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide"><img src="./assets/img/photos/is3.jpg" class="rounded" alt="" /></div>
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->

Thumbnail Slider

image
image
image
image
image
image
image
image
<div class="swiper-container swiper-thumbs-container dots-over" data-margin="10" data-dots="false" data-nav="true" data-thumbs="true">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <figure class="rounded"><img src="./assets/img/photos/shs1.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs1@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        <figure class="rounded"><img src="./assets/img/photos/shs2.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs2@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        <figure class="rounded"><img src="./assets/img/photos/shs3.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs3@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
      </div>
      <!--/.swiper-slide -->
      <div class="swiper-slide">
        <figure class="rounded"><img src="./assets/img/photos/shs4.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs4@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
      </div>
      <!--/.swiper-slide -->
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
  <div class="swiper swiper-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./assets/img/photos/shs1-th.jpg" class="rounded" alt="" /></div>
      <div class="swiper-slide"><img src="./assets/img/photos/shs2-th.jpg" class="rounded" alt="" /></div>
      <div class="swiper-slide"><img src="./assets/img/photos/shs3-th.jpg" class="rounded" alt="" /></div>
      <div class="swiper-slide"><img src="./assets/img/photos/shs4-th.jpg" class="rounded" alt="" /></div>
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->

Instructions

Data Attributes

Specifically created for the template to be used on HTML. Apply any attribute to .swiper-container to set swiper options.

Attribute Default Options Description
data-effect slide slide | fade Slide transition effect.
data-items 3 number Number of items per view in all devices.
data-items-xs 1 number Number of items on screen width 0 - 575px
data-items-sm items-xs number Number of items on screen width 576px - 767px
data-items-md items-sm number Number of items on screen width 768px - 991px
data-items-lg items-md number Number of items on screen width 992px - 1199px
data-items-xl items-lg number Number of items on screen width 1200px - 1400px
data-items-xxl items-xl number Number of items on screen width 1400px and above
data-speed 500 number Duration of transition between slides (in ms).
data-autoplay false true | false Enable/disable autoplay.
data-autoplaytime 5000 number

Delay between transitions (in ms).

If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide.
data-autoheight false true | false Set to true and slider wrapper will adapt its height to the height of the currently active slide.
data-margin 30 number Distance between slides in px.
data-loop false true | false Set to true to enable continuous loop mode.
data-nav false true | false Enable/disable navigation arrows.
data-dots false true | false Enable/disable pagination bullets.
data-drag false true | false Enable/disable moving with touch.
data-reverse false true | false Enables autoplay in reverse direction
data-updateresize true true | false Swiper will recalculate slides position on window resize (orientationchange)

Alternative styles for controls

Use the following classes with .swiper-container to change navigation styles.

Class Description
.swiper-hero Enables hero slider, ie: Demo 15
.swiper-fullscreen Enables fullscreen slider, ie: Demo 23
.nav-dark Changes arrow background to dark color.
.nav-color Changes arrow background to primary color.
.nav-bottom Moves arrows below the slider.
.nav-start Moves arrows from center to left. Requires .nav-bottom
.dots-light Changes bullet colors to white.
.dots-start Moves bullets from center to left.
.dots-over Moves bullets on the slider.
.dots-closer Moves bullets closer below the slider.

Full examples

Blog Blocks, Testimonials Blocks, Portfolio Blocks, Client Blocks

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image