Author: | ClaudiaPascualGea |
---|---|
Views Total: | 658 views |
Official Page: | Go to website |
Last Update: | November 13, 2021 |
License: | MIT |
Preview:

Description:
CG Carousel is an easy-to-implement, fully responsive, continuous-looping carousel plugin written in vanilla JavaScript.
How to use it:
1. Include the CG Carousel plugin’s JavaScript and Stylesheet on the page.
<link rel="stylesheet" href="./src/styles.css" /> <script src="./src/index.js"></script>
2. Add slides and optional nav buttons to the carousel.
<div class="cg-carousel"> <div class="cg-carousel__container" id="js-carousel-example"> <div class="cg-carousel__slide js-carousel__slide">Slide 1</div> <div class="cg-carousel__slide js-carousel__slide">Slide 2</div> <div class="cg-carousel__slide js-carousel__slide">Slide 3</div> <div class="cg-carousel__slide js-carousel__slide">Slide 4</div> </div> <div class="cg-carousel__btns"> <div class="cg-carousel__btn" id="js-carousel__prev-example">Prev</div> <div class="cg-carousel__btn" id="js-carousel__next-example">Next</div> </div> </div>
3. If you want to make the slide rounded borders…
<div class="cg-carousel"> <div class="cg-carousel__container" id="js-carousel-example"> <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 1</div> <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 2</div> <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 3</div> <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 4</div> </div> <div class="cg-carousel__btns"> <div class="cg-carousel__btn" id="js-carousel__prev-example">Prev</div> <div class="cg-carousel__btn" id="js-carousel__next-example">Next</div> </div> </div>
4. Initialize the carousel plugin with default options.
const myCarousel = new CgCarousel('#js-carousel-example');
5. Enable the navigation buttons.
// Next Button const nextButton = document.getElementById('js-carousel__next-example'); nextButton.addEventListener('click', () => myCarousel.next()); // Prev Button const prevButton = document.getElementById('js-carousel__prev-example'); prevButton.addEventListener('click', () => myCarousel.prev());
6. Possible plugin options to customize the carousel.
const myCarousel = new CgCarousel('#js-carousel-example',{ // enable/disable infinite loop loop: false, // enable/disable autoplay autoplay: false, // autoplay interval in ms autoplaySpeed: 3000, // transition speed in ms transitionSpeed: 1000, // how many slides per view slidesPerView: 1, // space between sldies spacing: 0 });
7. Determine how the carousel works on different screen sizes.
const myCarousel = new CgCarousel('#js-carousel-example',{ breakpoints: { 768: { // options here }, 1024: { // options here } } });
8. Event handlers.
const myCarousel = new CgCarousel('#js-carousel-example',{ // options here },{ resized: function (instance) { console.log(instance.getSlides()); }, built: function (instance) { console.log(instance.getSlides()); }, created: function (instance) { console.log(instance.getSlides()); }, moved: function (instance) { console.log(instance.getCurrentIndex()); } };);