Mobile-Friendly Carousel Slider with Responsive Breakpoints – SuperSlider

SuperSlider is a lightweight JavaScript library that creates modern, responsive, customizable, touch-enabled carousels.

It works with any HTML content and includes built-in support for pagination dots, navigation arrows, and drag interactions.

Features:

• Responsive Breakpoints: Automatically adjusts slides per view and spacing based on mobile, tablet, and desktop viewport sizes.
• Autoplay Control: Configurable autoplay with customizable speed intervals and automatic pause on user interaction.
Sponsored
• Loop Mode: Seamless infinite scrolling by cloning slides at the start and end of the sequence.
• Touch and Mouse Drag: Supports free drag mode with velocity detection for natural swipe interactions on both touch and desktop devices.
• Centered Layout Option: Centers slides within the viewport with automatic padding calculation.
• RTL Support: Supports horizontal right-to-left layout for international applications.
• External Controls: Allows binding of custom navigation buttons through data attributes.
• Accessibility: Includes ARIA labels on navigation elements for screen reader compatibility.

How To Use It:

1. Add the SuperSlider’s JavaScript and CSS files to the page.

<link rel="stylesheet" href="super-slider.min.css">
<script src="super-slider.min.js"></script>

2. Create a container with the required class structure as follows:

<div class="super-slider" id="mySlider">
  <!-- Wrapper contains all slides -->
  <div class="super-slider-wrapper">
    <div class="super-slide"><img src="img1.jpg" alt="Slide 1"></div>
    <div class="super-slide"><img src="img2.jpg" alt="Slide 2"></div>
    <div class="super-slide"><img src="img3.jpg" alt="Slide 3"></div>
    <!-- Add more slides as needed -->
  </div>
  <!-- Optional pagination container -->
  <div class="super-slider-pagination"></div>
  <!-- Optional navigation arrows -->
  <div class="super-slider-arrows">
    <button class="super-slider-arrow super-slider-arrow-prev">Prev Icon</button>
    <button class="super-slider-arrow super-slider-arrow-next">Next Icon</button>
  </div>
</div>

3. Initialize the library to create a basic carousel slider.

new SuperSlider("#mySlider", {
  // options here
});

4. Sometimes you might need to place navigation buttons outside the slider. SuperSlider can help you handle this via the data-controller attribute.

<!-- Custom buttons anywhere in your DOM -->
<div id="prevBtn">Prev</div>
<div id="nextBtn">Next</div>

<!-- Hidden or styled arrows inside the slider that link to the custom buttons -->
<!-- The data-controller ID must match the external button's ID -->
<button class="super-slider-arrow super-slider-arrow-prev" data-controller="#prevBtn"></button>
<button class="super-slider-arrow super-slider-arrow-next" data-controller="#nextBtn"></button>

5. Customize the slider with the following options:

const slider = new SuperSlider("#mySlider", {

  autoplay: true,          // Enables automatic sliding
  speed: 3000,             // Time between slides in ms
  loop: true,              // Creates an infinite loop by cloning slides
  centered: false,         // Centers the active slide in the view
  freeMode: true,          // Allows free dragging without snapping
  rtl: false,              // Reverses direction for RTL layouts
  
  // Configure responsive behavior
  slidesPerView: { 
    mobile: 1,  // Show 1 slide on screens < 768px
    tablet: 2,  // Show 2 slides on screens < 1024px desktop: 3 // Show 3 slides on screens >= 1024px
  },
  
  // Configure gap between slides in pixels
  spaceBetween: { 
    mobile: 10, 
    tablet: 15, 
    desktop: 20 
  },
  
  arrows: true,     // Generates or binds arrow functionality
  pagination: true  // Generates pagination dots
  
});

5. Control your slider programmatically using the following API methods:

• next(): Moves the slider to the next slide.
• prev(): Moves the slider to the previous slide.
• goTo(index, animate): Moves to a specific slide index.
  • index (Number): The target slide index.
  • animate (Boolean): Whether to animate the transition. Default is true.
• goToReal(index): Moves to the “real” slide index, ignoring cloned slides used for looping.
• update(): Recalculates the slider layout. Call this if you add or remove slides dynamically.
• destroy(): Removes all event listeners, removes clones, and cleans up the DOM structure.

Alternatives

• Swiper: More advanced transitions and 3D effects but has a larger footprint than SuperSlider.
• Slick: A jQuery-dependent carousel that provides similar core functionality.
• Glide.js: Another lightweight carousel library with comparable features.

FAQs

Q: How do I prevent autoplay from interfering with user interactions?
A: SuperSlider automatically pauses autoplay when the user hovers over the slider container or initiates a drag interaction. The autoplay resumes when the user’s mouse leaves the container. This behavior is built into the library when both autoplay and freeMode options are enabled.

Q: Can I dynamically add or remove slides after initialization?

A: Yes. Modify the DOM directly by adding or removing elements with the super-slide class, then call the update() method on your slider instance.

Q: Why are my slides not sizing correctly when the container is hidden initially?
A: SuperSlider calculates dimensions based on the container’s offsetWidth during initialization. If the container is hidden with display: none, the width calculation returns zero. Initialize the slider after making the container visible, or trigger the update() method once the container becomes visible to recalculate dimensions.

Q: How do I synchronize multiple sliders to move together?
A: Store references to both slider instances and call their navigation methods in response to the same events. For example, when one slider advances, call the next() method on the other slider instance.

The post Mobile-Friendly Carousel Slider with Responsive Breakpoints – SuperSlider appeared first on CSS Script.