Sandbox - Modern & Multipurpose Bootstrap 5 Template

Instructions

Change data-dots or data-nav attributes as true/false to show/hide bullets or navigation arrows.

Add dots-dark or nav-dark classes next to owl-carousel class to change the colors of navigation arrows or bullets.

Add dots-start class next to owl-carousel class to move bullets from center to left.

For full carousel examples check out: Blog Blocks, Testimonials Blocks, Portfolio Blocks or Client Blocks

Simple Carousel

View example's code

<div class="carousel owl-carousel" data-margin="30" data-nav="true" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "2"}, "1200":{"items": "3"}}'>
  <div class="item">
    ...
  </div>
  <!-- /.item -->
  <div class="item">
    ...
  </div>
  <!-- /.item -->
  <div class="item">
    ...
  </div>
  <!-- /.item -->
  ...
</div>
<!-- /.owl-carousel -->

Card Carousel

View example's code

<div class="carousel owl-carousel gap-small blog grid-view" data-margin="0" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "2"}, "1200":{"items": "2"}}'>
  <div class="item">
    <div class="item-inner">
      <article>
        <div class="card">
          ...
        </div>
        <!-- /.card -->
      </article>
      <!-- /article -->
    </div>
    <!-- /.item-inner -->
  </div>
  <!-- /.item -->
  <div class="item">
    <div class="item-inner">
      <article>
        <div class="card">
          ...
        </div>
        <!-- /.card -->
      </article>
      <!-- /article -->
    </div>
    <!-- /.item-inner -->
  </div>
  <!-- /.item -->
  <div class="item">
    <div class="item-inner">
      <article>
        <div class="card">
          ...
        </div>
        <!-- /.card -->
      </article>
      <!-- /article -->
    </div>
    <!-- /.item-inner -->
  </div>
  <!-- /.item -->
  <div class="item">
    <div class="item-inner">
      <article>
        <div class="card">
          ...
        </div>
        <!-- /.card -->
      </article>
      <!-- /article -->
    </div>
    <!-- /.item-inner -->
  </div>
  <!-- /.item -->
</div>
<!-- /.owl-carousel -->

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="basic-slider owl-carousel gap-small text-center" data-margin="30">
  <div class="item">
    ...
  </div>
  <!-- /.item -->
  <div class="item">
    ...
  </div>
  <!-- /.item -->
  <div class="item">
    ...
  </div>
  <!-- /.item -->
</div>
<!-- /.owl-carousel -->

Image Slider

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

View example's code

<div class="basic-slider owl-carousel dots-over" data-nav="true" data-margin="5">
  <div class="item"><img src="./assets/img/photos/pp7.jpg" class="rounded" alt="" /></div>
  <div class="item"><img src="./assets/img/photos/pp8.jpg" class="rounded" alt="" /></div>
  <div class="item"><img src="./assets/img/photos/pp9.jpg" class="rounded" alt="" /></div>
</div>
<!-- /.basic-slider -->

Carousel

Instructions

Simple Carousel

Read More

Read More

Read More

Read More

Read More

Card Carousel

Text Slider

Image Slider

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

Usage

Styleguide

Elements

Carousel

Instructions

Simple Carousel

Read More

Read More

Read More

Read More

Read More

Card Carousel

Text Slider

Image Slider

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