Responsive Keyboard Accessibile Slider Plugin – coolSlider

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,
});