Minimal Card Carousel In Vanilla JavaScript – Simple-Carousel

Category: Javascript , Slider | March 3, 2018
Author: aadityataparia
Views Total: 1,981
Official Page: Go to website
Last Update: March 3, 2018
License: MIT

Preview:

Minimal Card Carousel In Vanilla JavaScript – Simple-Carousel

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"));

You Might Be Interested In:


Leave a Reply