Minimal Card Carousel In Vanilla JavaScript – Simple-Carousel

Preview:

Description:

A simple and lightweight vanilla JavaScript card slider/carousel plugin for your web project.

Features:

• Image lazy load.
• Fullscreen mode.
• Subtle transition effects.
• Navigation and pagination.
• Without no dependencies.

How to use it:

Import the Simple-Carousel’s files into the document.

<link rel="stylesheet" href="sc.css">
<script src="sc.js"></script>

Add your own images together with the loading spinner and carousel controls to the page.

<div class="cor" id="demo">
  <img class="loading" style="position: absolute" src="loading.gif" alt="loading">
  <div class="scrollD">
    <!-- insert imgs here -->
    <img data-src="https://picsum.photos/600/600?image=488" src="https://picsum.photos/600/600?image=488">
    <img data-src="https://picsum.photos/600/600?image=454">
    <img data-src="https://picsum.photos/600/600?image=449">
  </div>
  <div class="arrow l noselect">
    <img src="down.svg" class="fit" alt="\/" />
  </div>
  <div class="arrow r noselect">
    <img src="down.svg" class="fit" alt="\/" />
  </div>
  <div class="br">
    <div class="fs right">
      <img src="fs.svg" alt="FS" />
    </div>
    <div class="num"></div>
  </div>
</div>

Initialize the carousel and done.

SC.new(document.querySelector("#demo"));