Extended carousel based on Bootstrap 5 using only vanilla js.

  • By Carlos Pozo
  • Last update: Jul 26, 2022
  • Comments: 4

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

"> 
  

    <

Github

https://github.com/crpozo/slider-bs5

Comments(4)

  • 1

    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

  • 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.

  • 3

    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

  • 4

    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.

Popular Tag

Related