Slider

The slider plugin initializes an interactive carousel using the Swiper library based on the data-slider attribute.

In development, it is implemented in assets/js/modules/slider.js and is initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, you must follow this structure:

Add data-slider on a parent wrapper element.
You can optionally provide JSON configuration via data-slider-config.
Inside the parent wrapper, include standard Swiper markup:
- A container with the swiper class.
- A wrapper with the swiper-wrapper class.
- One or more slides with the swiper-slide class.
For pagination, add an element with data-slider-pagination inside the parent wrapper.
For navigation, add elements with data-slider-btn="prev" and data-slider-btn="next" inside the parent wrapper.

Notes:

You can place multiple sliders on the same page; the plugin will initialize each [data-slider] block it finds.
The default configuration uses 1 slide per view, 30px space between, loops, and has a transition speed of 600ms.
To override the default settings, you can pass a JSON string to data-slider-config like data-slider-config='{"slidesPerView": 2, "spaceBetween": 20}'. You can check out Swiper parameters .

Markup Example

Below is an example markup of the plugin. Key details are included in the HTML comments:


<!-- Start: data-slider on parent wrapper -->
<div data-slider>
  <!-- Start: swiper container -->
  <div class="swiper">
    <!-- Start: swiper wrapper -->
    <div class="swiper-wrapper">
      <!-- Start: swiper slide -->
      <div class="swiper-slide h-auto!">
        <!-- Slider content placed here -->
        <div class="...">
           ...
        </div>
      </div>
      <!-- End: swiper slide -->
 
      <!-- Start: Another swiper slide -->
      <div class="swiper-slide h-auto!">
        ...
      </div>
      <!-- End: Another swiper slide -->
    </div>
    <!-- End: swiper wrapper -->
  </div>
  <!-- End: swiper container -->
 
  <!-- Start: Slider Navigation and Pagination -->
  <div class="mt-10 flex items-center justify-center gap-6">
    <!-- Add data-slider-btn="prev" on the prev button -->
    <button
      class="group flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-border"
      data-slider-btn="prev"
    >
      <span class="relative overflow-hidden">
        <span
          class="relative block h-full translate-y-0 transition-transform duration-300 ease-in-out group-hover:-translate-y-full"
        >
          <i data-lucide="arrow-left" class="size-4"></i>
        </span>
        <span
          class="absolute top-0 left-0 block h-full translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0"
        >
          <i data-lucide="arrow-left" class="size-4"></i>
        </span>
      </span>
    </button>
 
    <!-- Add data-slider-pagination on the pagination element -->
    <div
      class="flex w-auto! items-center gap-4"
      data-slider-pagination
    ></div>
 
    <!-- Add data-slider-btn="next" on the next button -->
    <button
      class="group flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-border"
      data-slider-btn="next"
    >
      <span class="relative overflow-hidden">
        <span
          class="relative block h-full translate-y-0 transition-transform duration-300 ease-in-out group-hover:-translate-y-full"
        >
          <i data-lucide="arrow-right" class="size-4"></i>
        </span>
        <span
          class="absolute top-0 left-0 block h-full translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0"
        >
          <i data-lucide="arrow-right" class="size-4"></i>
        </span>
      </span>
    </button>
  </div>
  <!-- End: Slider Navigation and Pagination -->
</div>
<!-- End: data-slider on parent wrapper -->

Demo Example

View the complete code sample on this page.

Homepage