Carousel

Simple Carousel

View example's code

<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.

View example's code

<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.

View example's code

<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

View example's code

<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-12">
          <div class="caption bg-white 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-12">
          <div class="caption bg-white 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

View example's code

<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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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

Carousel

Simple Carousel

Read More

Read More

Read More

Read More

Read More

Card Carousel

Text Slider

Image Slider

Vivamus sagittis lacus augue

Vivamus sagittis lacus augue

Thumbnail Slider

Instructions

Data Attributes

Alternative styles for controls

Full examples

Project Pages

Single Projects

Usage

Styleguide

Elements

Carousel

Simple Carousel

Read More

Read More

Read More

Read More

Read More

Card Carousel

Text Slider

Image Slider

Vivamus sagittis lacus augue

Vivamus sagittis lacus augue

Thumbnail Slider

Instructions

Data Attributes

Alternative styles for controls

Full examples