Responsive Carousel Slider With JavaScript And CSS3 – flexcards.js

flexcards.js is a responsive, easy-to-use carousel slider to present images or HTML content with a seamless user experience.

Built on top of Vanilla JavaScript, CSS3 transitions, and CSS Flexbox model.

How to use it:

1. Download the package and include the main JavaScript flexcards.js on the page.

<script src="./dist/flexcards.js"></script>

2. Add your content to the carousel slider. Note that the library supports either article or img tags as displayed below:

<!-- Article Carousel -->
<div id="flexcards" class="article">
  <article>
    <h1>First Item</h1>
  </article>
  <article>
    <h1>Second Item</h1>
  </article>
  <article>
    <h1>Third Item</h1>
  </article>
  ...
  <article>
    <h1>Last Item</h1>
  </article>
</div>
<!-- Image Carousel -->
<div id="flexcards" class="images">
  <img src="1.jpg" alt="Landscape">
  <img src="2.jpg" alt="Landscape">
  <img src="3.jpg" alt="Landscape">
  ...
  <img src="N.jpg" alt="Landscape">
</div>

3. Initialize the flexcards.js.

// Article Carousel
const flexcards = new FlexCards("#flexcards.article");
flexcards.carousel();

// Image Carousel
const flexcards2 = new FlexCards("#flexcards.images", { 
      components: "images" 
});
flexcards2.carousel({
  // options here
});

4. Available options to customize the carousel slider.

instance.carousel({
  // path to the navigation arrows
  arrowUrl: "/path/to/arrows.png",
  // apply a filter to the arrows
  colorized: true,
  // dots | numbers |
  indexType: "numbers",
  // primary color of the carousel
  theme: "#444",
  // shows a countdown timer on the top
  timer: true,
});

Changelog:

v2.2.8 (04/09/2023)

• Bugfixes