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

Category: Javascript , Slider | September 11, 2020
Author:abohall
Views Total:149 views
Official Page:Go to website
Last Update:September 11, 2020
License:MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply