Author: | 8lall0 |
---|---|
Views Total: | 3,623 views |
Official Page: | Go to website |
Last Update: | May 13, 2019 |
License: | MIT |
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>