Author: | benkimo6i |
---|---|
Views Total: | 9,098 views |
Official Page: | Go to website |
Last Update: | September 11, 2022 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript carousel plugin to flip through elements in a 3D space just like the Cover Flow.
Features:
- Navigation controls.
- Pagination bullets.
- Transition with a sliding effect.
- Infinite loop.
How to use it:
1. Load the needed JavaScript and CSS files in the HTML.
<link rel="stylesheet" href="carousel.css" /> <script src="carousel.js"></script>
2. Code the HTML for the carousel & controls.
<div class="carousel"></div>
3. Override the default images.
// show controls this.carouselOptions = ['previous', 'add', 'play', 'next']; // replace images here this.carouselData = [ { 'id': '1', 'src': '1.jpg', }, { 'id': '2', 'src': '2.jpg', }, { 'id': '3', 'src': '3.jpg', }, { 'id': '4', 'src': '4.jpg', }, { 'id': '5', 'src': '5.jpg', } ]; // items in view this.carouselInView = [1, 2, 3, 4, 5];
Changelog:
09/11/2022
- added new button styles
- added new play method
04/02/2021
- disabled gallery nav and added new add slide feature
Hi, great slider but, how can i put more than one in the same page ? It doesn’t work when i do a copy paste 🙁
Change class
Is it possible to make it scrollable via touch? Or dragged by a mouse without the next and prev buttons?
carousel.js:53 Uncaught TypeError: Cannot read property ‘appendChild’ of null
at carousel.js:53
at Array.forEach ()
at Carousel.setControls (carousel.js:52)
at carousel.js:95
Really great slider!! Please let me know how to enable auto looping of gallery items, and stop looping when at mouse hover.
Thanks!!
Hi Nicefull slider. But need to click on button next or prev before seeing images
Does anyone know how to display only 3 cards/images at a time?