Responsive Adaptive Slider/Carousel with Vanilla JS – No jQ Slider

Preview:

Description:

No jQ Slider is a pure JavaScript slider library that allows you to create responsive, adaptive, auto-rotating, endless-looping sliders/carousels without jQuery dependencies.

How to use it:

1. Include the necessary CSS and JavaScript files in your webpage.

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

2. Create the HTML structure for your slider. You’ll need a wrapper element, navigation buttons, a container for the slides, and a track to hold the individual slides. Each slide will contain your specific content.

<div class="slider">
  <button class="nav next">🡪</button>
  <button class="nav prev">🡰</button>
  <div class="slides-container">
    <div class="track">
      <div class="slide">
        <div class="slide-content">
          <h2>SLIDE 1</h2>
          <p>Slide 1 Content</p>
        </div>
      </div>
      <div class="slide">
        <div class="slide-content">
          <h2>SLIDE 2</h2>
          <p>Slide 2 Content</p>
        </div>
      </div>
      // more slides here
    </div>
  </div>
</div>

3. Initialize the slider by calling the createSlider function and passing an object containing your desired options.

createSlider({
  // options here
});

4. Customize the slider’s behavior and appearance using the following options:

• wrapper: Specifies the CSS selector for the main container of your slider.
• container: Identifies the CSS selector for the element holding all the slides.
• track: Points to the CSS selector of the element that contains the individual slides.
• nextBtn: Sets the CSS selector for the “next” navigation button.
• prevBtn: Sets the CSS selector for the “previous” navigation button.
• autoplay: A boolean value to enable or disable automatic sliding.
• autoplayInterval: Determines the time (in milliseconds) between each slide transition when autoplay is enabled.
• speed: Sets the duration of the slide animation in milliseconds.
• infinite: A boolean value to enable or disable infinite looping of the slides.
• visibleSlides: Defines the number of slides visible at the same time. If this number is greater than the total number of slides, it defaults to showing one slide.
• adaptiveHeigh: A boolean value. When true (default), the slider’s height adjusts to the tallest visible slide. Set to false for a fixed height.
• onChangeSlide: A function that executes after a slide transition. It receives the currently active slide element as an argument.

createSlider({
  wrapper: ".slider", 
  container: ".slides",
  track: ".slide-items",
  nextBtn: ".btn-next", 
  prevBtn: ".btn-prev",
  autoplay: true, 
  autoplayInterval: 4000, 
  speed: 500, /
  infinite: true,
  visibleSlides: 3,
  adaptiveHeigh: true, 
  onChangeSlide: (currentSlideElement) => {
    console.log("Current slide:", currentSlideElement);
  },
});