Slider

The Slider component is crafted to showcase individual slides with a fade transition effect.

On this page

About

This component is ideal for displaying a series of images, text, or other content types, transitioning smoothly from one slide to the next.

Usage

The slider component can be implemented with HTML markup and attribute configurations.

The component uses the Swiper library behind the scenes.

Examples

Basic example

html

<div class="slider">
  <div class="swiper" data-of-slider='{
      "pagination": "#slider-pagination-1",
      "navigationNext": "#slider-btn-next-1",
      "navigationPrev": "#slider-btn-prev-1"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="slider-pagination slider-pagination--bottom-center" id="slider-pagination-1"></div>

  <div class="slider-navigation">
     <button type="button" class="slider-button-prev btn btn-square btn-primary" id="slider-btn-prev-1">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-left-fill"/>
      </svg>
      

    </button>
    <button type="button" class="slider-button-next btn btn-square btn-primary" id="slider-btn-next-1">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-right-fill"/>
      </svg>
      

    </button>
  </div>
</div>

Loop & autoplay

Autoplay starts automatically cycling through slides. Loop continues play after the last slide.

html

<div class="slider">
  <div class="swiper" data-of-slider='{
      "autoplay": true,
      "loop": true,
      "speed": 600,
      "pagination": "#slider-pagination-2",
      "navigationNext": "#slider-btn-next-2",
      "navigationPrev": "#slider-btn-prev-2"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="slider-pagination slider-pagination--bottom-center" id="slider-pagination-2"></div>

  <div class="slider-navigation">
     <button type="button" class="slider-button-prev btn btn-square btn-primary" id="slider-btn-prev-2">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-left-fill"/>
      </svg>
      

    </button>
    <button type="button" class="slider-button-next btn btn-square btn-primary" id="slider-btn-next-2">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-right-fill"/>
      </svg>
      

    </button>
  </div>
</div>

Pagination position

You can place the pagination in different positions.

html

<div class="slider">
  <div class="swiper" data-of-slider='{
      "pagination": "#slider-pagination-3"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div id="slider-pagination-3" class="slider-pagination slider-pagination--top-right"></div>
</div>

The position of the pagination can be modified by adding one of the following modifier classes:

.slider-pagination--top-left
.slider-pagination--top-center
.slider-pagination--top-right
.slider-pagination--bottom-left
.slider-pagination--bottom-center
.slider-pagination--bottom-right

Each class adjusts the position of the pagination according to its description (top or bottom, combined with left, center, or right).

Pagination position static

If you do not want to place a pagination above the slide you can use one of the defined classes

.slider-pagination--left
.slider-pagination--center
.slider-pagination--right

html

<div class="slider">
  <div class="swiper" data-of-slider='{
      "pagination": "#slider-pagination-3-static"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div id="slider-pagination-3-static" class="slider-pagination slider-pagination--center"></div>
</div>

Content example

Your next destination

Escape ordinary, experience majestic views!

Find out more

Earth from space

Touch the stars, gaze at Earth's grace!

html

<div class="slider">
  <div class="swiper" data-of-slider='{
      "loop": true,
      "pagination": "#slider-pagination-4",
      "navigationNext": "#slider-btn-next-4",
      "navigationPrev": "#slider-btn-prev-4"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="wrapper">
          <div class="wrapper-content pt-5 pb-5 ps-5 pe-5 text-center" style="--bs-wrapper-color: #fff">
            <h2>Your next destination</h2>
            <p>Escape ordinary, experience majestic views!</p>
            <p>
              <a href="#" class="btn btn-light btn-sm icon-link">Find out more <svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
</svg>

</a>
            </p>
          </div>
          <div class="wrapper-bg-media">
            <figure>
              <img src="assets/media/sample-image.jpg" alt="">
            </figure>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="wrapper">
          <div class="wrapper-content text-center" style="--bs-wrapper-color: #fff">
            <h2>Earth from space</h2>
            <p>Touch the stars, gaze at Earth's grace!</p>
          </div>
          <div class="wrapper-bg-media">
            <figure>
              <video autoplay muted playsinline loop>
                <source src="assets/media/sample-video.mp4" type="video/mp4">
                <source src="assets/media/sample-video.ogg" type="video/ogg">
              </video>
            </figure>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="slider-pagination slider-pagination--bottom-center" id="slider-pagination-4"></div>

  <div class="slider-navigation">
     <button type="button" class="slider-button-prev btn btn-square btn-primary" id="slider-btn-prev-4">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-left-fill"/>
      </svg>
      

    </button>
    <button type="button" class="slider-button-next btn btn-square btn-primary" id="slider-btn-next-4">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#caret-right-fill"/>
      </svg>
      

    </button>
  </div>
</div>

Options

You can pass extra options as JSON value of the data attribute. Here is the list of all available options (alphabetically):

Option	Type	Default	Explanation
`autoplay`	`object\|boolean`	`undefined`	Object with autoplay parameters or boolean `true` to enable with default settings.
`loop`	`boolean`	`false`	Set to `true` to enable continuous loop mode. Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be `>= slidesPerView * 2`.
`navigationNext`	`object\|string`	`undefined`	The selector of the element that will work like “next” button after click on it .
`navigationPrev`	`object\|string`	`undefined`	The selector of the element that will work like “prev” button after click on it.
`pagination`	`object\|string`	`undefined`	The selector or the pagination element.
`speed`	`number`	`300`	Duration of transition between slides (in milliseconds).

Autoplay parameters

Option	Type	Default	Explanation
`delay`	`number`	`3000`	Delay between transitions (in milliseconds).
`disableOnInteraction`	`boolean`	`true`	Set to `false` and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
`pauseOnMouseEnter`	`boolean`	`false`	When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
`reverseDirection`	`boolean`	`false`	Enables autoplay in reverse direction.
`stopOnLastSlide`	`boolean`	`false`	Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode).
`waitForTransition`	`boolean`	`true`	When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition.

Events

Event	Description
`initialized.of.slider`	This event is fired immediately when the slider is ready.

const element = document.getElementById('slider')

element.addEventListener('initialized.of.slider', () => {
  // do something
})

CSS

Variables

src/scss/_slider.scss

--#{$prefix}slider-theme-color: #{$slider-theme-color};
--#{$prefix}slider-pagination-color: var(--#{$prefix}slider-theme-color);
--#{$prefix}slider-pagination-left: #{$slider-pagination-left};
--#{$prefix}slider-pagination-right: #{$slider-pagination-right};
--#{$prefix}slider-pagination-bottom: #{$slider-pagination-bottom};
--#{$prefix}slider-pagination-top: #{$slider-pagination-top};
--#{$prefix}slider-pagination-bullet-size: #{$slider-pagination-bullet-size};
--#{$prefix}slider-pagination-bullet-width: #{$slider-pagination-bullet-width};
--#{$prefix}slider-pagination-bullet-height: #{$slider-pagination-bullet-height};
--#{$prefix}slider-pagination-bullet-border-radius: #{$slider-pagination-bullet-border-radius};
--#{$prefix}slider-pagination-bullet-inactive-color: #{$slider-pagination-bullet-inactive-color};
--#{$prefix}slider-pagination-bullet-inactive-opacity: #{$slider-pagination-bullet-inactive-opacity};
--#{$prefix}slider-pagination-bullet-opacity: #{$slider-pagination-bullet-opacity};
--#{$prefix}slider-pagination-bullet-horizontal-gap: #{$slider-pagination-bullet-horizontal-gap};
--#{$prefix}slider-pagination-bullet-vertical-gap: #{$slider-pagination-bullet-vertical-gap};
--#{$prefix}slider-navigation-offset-x: #{$slider-navigation-offset-x};

Sass variables

src/scss/_variables.scss

$slider-theme-color:                              $primary;
$slider-offset-x:                                 12px;
$slider-offset-y:                                 12px;
$slider-pagination-left:                          $slider-offset-x;
$slider-pagination-right:                         $slider-offset-x;
$slider-pagination-bottom:                        $slider-offset-y;
$slider-pagination-top:                           $slider-offset-y;
$slider-pagination-bullet-size:                   8px;
$slider-pagination-bullet-width:                  $slider-pagination-bullet-size;
$slider-pagination-bullet-height:                 $slider-pagination-bullet-size;
$slider-pagination-bullet-border-radius:          50%;
$slider-pagination-bullet-inactive-color:         #000;
$slider-pagination-bullet-inactive-opacity:       .2;
$slider-pagination-bullet-opacity:                1;
$slider-pagination-bullet-horizontal-gap:         4px;
$slider-pagination-bullet-vertical-gap:           6px;
$slider-navigation-offset-x:                      $slider-offset-x;