Author: | jainsarwang |
---|---|
Views Total: | 212 views |
Official Page: | Go to website |
Last Update: | February 3, 2023 |
License: | MIT |
Preview:

Description:
A responsive, fast, keyboard-accessible slider/carousel plugin that you can showcase images, videos, and any HTML content with ease.
How to use it:
1. Load the minified version of the coolSlider plugin in the document.
<link rel="stylesheet" href="/src/css/coolSlider.min.css" /> <script src="/src/js/coolSlider.min.js"></script>
2. Add slides to the coolSlider.
<div class="coolSlider" id="coolSlider-example"> <img src="1.png" /> <div style=" width:100%; background: linear-gradient(#e74545,#ffffffd9); color: #4f504ffc; display: grid; place-content: center; "> <h1>HTML Content</h1> </div> <video autoplay muted loop> <source src="video.mp4" type="video/mp4" /> </video> </div>
3. Initialize the plugin to generate a default slider.
new CoolSlider({ slider:document.querySelector('#coolSlider-example.coolSlider') });
4. Available options to customize the slider.
new CoolSlider({ slider:document.querySelector('#coolSlider-example.coolSlider'), // max width of the slider maxWidth: '100vw', // enable next/prev nav buttons controls: true, // enable arrow keys isKeyControlled: true, // 5000 = auto slide every 5000ms autoSlide: false, // aspect ratio of the slide items aspectRatio: 'auto', // pagination colors paginationActiveColorCode: '#aaaaaa', paginationColorCode: '#fe51ad', // 0 (default) 'For Disc' // 1 'For Circle' // 2 'For Horizontal Bar' paginationType: 0, // carousel mode infinite: false, });