All themes

Sandbox Jekyll documentation

Carousel

Learn how to use carousel in Sandbox.

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

<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

<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.webp" 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.webp" 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.webp" class="rounded" alt="" /></div>
    </div>
    <!--/.swiper-wrapper -->
  </div>
  <!-- /.swiper -->
</div>
<!-- /.swiper-container -->

Thumbnail Slider

<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.webp" 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.webp" 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.webp" 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.webp" 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.webp" class="rounded" alt="" /></div>
      <div class="swiper-slide"><img src="./assets/img/photos/shs2-th.webp" class="rounded" alt="" /></div>
      <div class="swiper-slide"><img src="./assets/img/photos/shs3-th.webp" class="rounded" alt="" /></div>
      <div class="swiper-slide"><img src="./assets/img/photos/shs4-th.webp" 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
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
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