Responsive Scrolling Carousel In Pure JavaScript – pureSlider

Preview:

Description:

The pureSlider JavaScript library helps you create a responsive horizontal scrolling carousel for showcasing images on the mobile and desktop.

Based on the HTML list, CSS flexbox, transition, and transform properties.

How to use it:

Include the core stylesheet in the header of the document.

<link rel="stylesheet" href="style/style.css">

The required HTML structure for the carousel.

<div class="slider">
  <ul class="slider__cnt">
    <li class="slider__el">
      <div class="img__cnt">
        <img src="1.jpg"/>
      </div>
    </li>
    <li class="slider__el">
      <div class="img__cnt">
        <img src="2.jpg"/>
      </div>
    </li>
    <li class="slider__el">
      <div class="img__cnt">
        <img src="3.jpg"/>
      </div>
    </li>
    ...
  </ul>
</div>

Place next/prev navigation buttons at the bottom of the carousel.

<div class="controls">
  <button class="toggle">Prev</button>
  <button class="toggle" data-toggle="next">Next</button>
</div>

Include the pureSlider’s JavaScript at the bottom of the webpage. That’s it.

<script src="js/slider.js"></script>