Author: | vadymshymko |
---|---|
Views Total: | 7,884 views |
Official Page: | Go to website |
Last Update: | December 17, 2020 |
License: | MIT |
Preview:

Description:
PureJSCarousel is a standalone JavaScript library that helps you create basic, touch-friendly slider / carousel with lots of customization options.
How to use it:
Add the PureJSCarousel JavaScript library to your webpage when needed.
<script src="pure-js-carousel.js"></script>
Create a group of html content for the slider / carousel.
<div class="carousel" id="demo"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> <div class="slide">Slide 3</div> ... </div>
The basic CSS styles.
.pure-js-carousel { overflow: hidden; } .pure-js-carousel-list:before, .pure-js-carousel-list:after { content: ""; display: table; } .pure-js-carousel-list:after { clear: both; } .pure-js-carousel-slide { float: left; }
Style the navigation and pagination whatever you like.
.pure-js-carousel-btn { background: transparent; border: 0; box-shadow: none; cursor: pointer; height: 20px; margin-top: -35px; position: absolute; top: 50%; width: 20px; } .pure-js-carousel-btn-next { border-bottom: 3px solid #f00; border-right: 3px solid #f00; right: 5px; -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg); } .pure-js-carousel-btn-prev { border-bottom: 3px solid #f00; border-left: 3px solid #f00; left: 5px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .pure-js-carousel-dots { float: left; margin-top: 15px; text-align: center; width: 100%; } .pure-js-carousel-dot { display: inline-block; margin: 0 5px; } .pure-js-carousel-dot-btn { background: green; border-radius: 50%; height: 20px; width: 20px; } .active .pure-js-carousel-dot-btn { background: blue; }
Create a new carousel instance as follow.
var carouselDefault = new PureJSCarousel({ carousel: '#demo', slide: '.slide' });
All configuration options.
var carouselDefault = new PureJSCarousel({ // CSS selector for carousel wrapper carousel: '#carousel-default', // CSS selector for carousel items slide: '.slide', // CSS selectors for next / prev navigation btnNext: document.createElement('button'), btnPrev: document.createElement('button'), // slides the items one by one oneByOne: false, // animation speed speed: 1000, // activate slide activeIndex: 0, // animation delay delay: 0, // easing effect effect: 'linear', // autopaly options autoplay: false, autoplayDelay: 1000, autoplayStartDelay: 1000, autoplayDirection: 'next', // infinite looping infinite: false, });
API methods.
var carouselDefault = new PureJSCarousel({ carousel: '#carousel-default', slide: '.slide' }); // Go to next slide carouselDefault.goToNext(); // Go to previous slide carouselDefault.goToPrev(); // Go to specific slide carouselDefault.goToNext(slideIndex); // Disable carousel controls carouselDefault.disableControl(); // Enable carousel controls carouselDefault.enableControl(); // Destroy the carousel carouselDefault.destroy(); // Enable autoplay carouselDefault.startAutoplay(autoplayDirection); // Stop autoplay carouselDefault.stopAutoplay();
Changelog
12/17/2020
- Added v3.0: use transform instead of marginLeft && add startAutoplay and stopAutoplay methods
02/14/2020
- Fix bug with slide by touch (for oneByOne enabled)
03/23/2019
- Update JS
where do i put the new instance?