Extended carousel based on Bootstrap 5 using only vanilla js.

Carlos Pozo

Last update: Jul 26, 2022

Related tags

Overview

Description

Extended Slider based on Bootstrap 5 using only carousel component and vanilla js.

Requirements:

Bootstrap 5

Installation

npm i -D extended-carousel-bs5

Instructions

Build dist files

npm run build

Multiple columns (Responsive)  :   data-ec-toggle="responsive-carousel"
Number of slideshows           :   data-ec-size="4"
Thumbnail slider               :   data-ec-thumbnail="slider"
Thumbnail gallery              :   data-ec-thumbnail="gallery"

Demo inside dist/index.html

Usage

  <!-- Multiple Columns Carousel Example -->

    <<div id="carouselMultipleColumns" class="carousel slide" data-ec-toggle="responsive-carousel" data-ec-size="5">
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div> <img src="..."> </div>
        </div>
        <div class="carousel-item">
          <div> <img src="..."> </div>
        </div>
        <div class="carousel-item">
          <div> <img src="..."> </div>
        </div>
        <div class="carousel-item">
          <div> <img src="..."> </div>
        </div>
        <div class="carousel-item">
          <div> <img src="..."> </div>
        </div>
        <div class="carousel-item">
          <div> <img src="..."> </div>
        </div>
      </div>
      <a class="carousel-control-prev bg-transparent w-aut" href="#carouselMultipleColumns" role="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next bg-transparent w-aut" href="#carouselMultipleColumns" role="button" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div>

  <!-- Thumbnail Carousel Example -->

    <div data-ec-thumbnail="slider">
      <!-- Main -->
      <div id="carouselMain" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
        <div class="carousel-inner text-center">
          <div class="carousel-item active">
            <div><img src="https://via.placeholder.com/400?text=1" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div><img src="https://via.placeholder.com/400?text=2" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div><img src="https://via.placeholder.com/400?text=3" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div><img src="https://via.placeholder.com/400?text=4" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div><img src="https://via.placeholder.com/400?text=5" class="img-fluid" alt="..."></div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselMain" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselMain" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      <!-- Nav -->
      <div id="carouselNav" class="carousel slide"data-bs-ride="false" data-bs-interval="false" data-ec-toggle="responsive-carousel" data-ec-size="4">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div data-slide-number="0"><img src="https://via.placeholder.com/200?text=1" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div data-slide-number="1"><img src="https://via.placeholder.com/200?text=2" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div data-slide-number="2"><img src="https://via.placeholder.com/200?text=3" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div data-slide-number="3"><img src="https://via.placeholder.com/200?text=4" class="img-fluid" alt="..."></div>
          </div>
          <div class="carousel-item">
            <div data-slide-number="4"><img src="https://via.placeholder.com/200?text=5" class="img-fluid" alt="..."></div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselNav" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselNav" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

  <!-- Play/Stop Carousel Example -->

    <div id="carouselPlayStop" class="carousel slide" data-ec-thumbnail="gallery" data-ec-interval="5000">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="...">
        </div>
        <div class="carousel-item">
           <img src="...">
        </div>
        <div class="carousel-item">
           <img src="...">
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselPlayStop" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselPlayStop" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      <div class="carousel-indicators justify-content-start">
        <img src="https://via.placeholder.com/50/FF0000/FFFFFF?text=1" type="button" class="active" data-bs-target="#carouselPlayStop" data-bs-slide-to="0" alt="Slide 1">
        <img src="https://via.placeholder.com/50/FF0000/FFFFFF?text=2" type="button" data-bs-target="#carouselPlayStop" data-bs-slide-to="1" alt="Slide 2">
        <img src="https://via.placeholder.com/50/FF0000/FFFFFF?text=3" type="button" data-bs-target="#carouselPlayStop" data-bs-slide-to="2" alt="Slide 3">
        <button id="controlCarousel">Pause</button>
      </div>
    </div>

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Jul 19, 2022

Bootstrap-select - Shim repository for Bootstrap-select that works with bootstrap 4.

bootstrap-select Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard sel

Aug 27, 2022

The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Jan 8, 2023

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Feb 10, 2022

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. 🎉 Support us with Developer Merchandise

Jan 2, 2023

A timed continuous carousel that uses vanilla JavaScript & CSS animations.

Continuous Carousel ∞ Timed continuous carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. Mar

Jan 3, 2023

Extended version of Rambda

Rambdax Extended version of Rambda(utility library) - Documentation Rambda is smaller and faster alternative to the popular functional programming lib

Dec 30, 2022

✏️ Extended Writer supercharges Kirby's built-in Writer field with useful marks, nodes and features you wish were built-in

Extended Writer Extended Writer supercharges Kirby's built-in Writer field and block with useful marks, nodes and features you wish were built-in. Fea

Nov 10, 2022

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

Jan 7, 2023

Comments

Carousel Doest Scroll Automatically

Hi! Good Day Sir, I'm a beginner in using bootstrap 5, thank you very much for your extended carousel, Ive been able to use it on my project looks nice, but the multiple columns carousel doesnt scroll automatically, i added interval but it only scrolls on click i have no knowledge in javascript so i cant undestand your code, can you help me out how to get it working, advance thanks to you

opened by Allansmx1 2
Multiple instances of responsive-carousel

Hi @crpozo , thanks for your work. I have a question about how to generate multiple carousels (multiple instances) on a single page, trying not to replicate the JS file several times.

opened by EnzoRimapa 0
Clicking on thumbnails gives unpredictable results

Hi,

Nice and interesting design! Thank you!

Unfortunately when clicking on the thumbnails the top images don't sync with the thumbnail number all the time.

David

opened by Allmedialab 0
Lazyload problem

Firstly thanks for your work. When I add the codes first item(active one) of slide image directly load. But other 3 ones wait for load...

How can we fix it for lazyload?

For ex: if data-ec-size="4" i need to be sure 4 ones trigger same time for lazyload.

opened by denizgolbas 0

Extended carousel based on Bootstrap 5 using only vanilla js.

Related tags

Overview

Description

Installation

Instructions

Usage

You might also like...

Comments

Owner

Carlos Pozo

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

A lightweight carousel library with fluid motion and great swipe precision

Swiffy-slider - Super fast carousel and slider with touch for optimized websites running in modern browsers.

jQuery only range slider

A browser only tool for converting npm package to ES module.

OlumSlider is a lightweight and flexible slider, written via vanilla js

JavaScript library for one-directional scrolling with item based navigation support.

The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.