Easy Touch-friendly Image & Video Carousel – Reggie-Slider

Preview:

Description:

A Vanilla JavaScript slider library that lets you create a configurable, mobile-friendly carousel to showcase your images, videos, or any content on the web.

More Features:

• Responsive and cross-platform.
• Auto adjusts the height to fit the content.
• Autoplay mode. Auto pauses the carousel when out of view.
• Allows to navigate between carousel items with touch swipe or mouse drag.
• Allows to display multiple items per view.
• Easy to implement without any JS call.
• Easy to config via HTML data attributes.

How to use it:

1. Load the Reggie Slider’s files in the document.

<template class="reggie-slider-template">
  <div class="photo-container">
    <img src="img/01.jpg" alt="Reggie">
  </div>
  <div class="photo-container">
    <img src="img/02.jpg" alt="Reggie">
  </div>
  <div class="photo-container">
    Any Content Here
  </div>
  ...
</template>

2. Add content to the carousel.

<template class="reggie-slider-template">
  <div class="photo-container">
    <img src="img/01.jpg" alt="Reggie">
  </div>
  <div class="photo-container">
    <img src="img/02.jpg" alt="Reggie">
  </div>
  <div class="photo-container">
    Any Content Here
  </div>
  ...
</template>

3. Assign a unique ID to the carousel if there are multiple instances on the page.

<template data-id="reggie-1" class="reggie-slider-template">
  ...
</template>

4. Enable the autoplay mode.

<template data-id="reggie-1" data-auto-slide="true" class="reggie-slider-template">
  ...
</template>

5. Determine whether to show next/prev buttons.

<template data-id="reggie-1" data-arrows="true" class="reggie-slider-template">
  ...
</template>

6. Enable touch swipe mouse drag events.

<template data-id="reggie-1" data-swipe="true" class="reggie-slider-template">
  ...
</template>

7. Specify how many slides to show per view.

<template data-id="reggie-1" data-columns="3" class="reggie-slider-template">
  ...
</template>

8. Determine whether to auto adjust the carousel’s height depending on the content.

<template data-id="reggie-1" data-auto-height="true" class="reggie-slider-template">
  ...
</template>