Press "Enter" to skip to content

Simple Carousel In Pure Vanilla Javascript with Lazyloading

A simple carousel in vanilla javascript/web component/SF-component plugin for your web project.

card carousel ui, carousel ui design mobile, carousel ui examples, mobile carousel examples, carousel designs website

Features

  • In vanilla JS (ES6)
  • Aligned horizontally and vertically images to fit in the container
  • Arrows to move through pictures
  • The number represents the total number of images and the current image index
    full-screen button
  • Motion picture changing
  • Images can be replaced with other HTML elements (to make slides)

How to make use of it:

1. Import Simple-Carousel files into your document.

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

2. Add your own images 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>

3. Configure the carousel.

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

minimal card carousel, Simple-Carousel Plugin/Github


See Demo And Download

Official Website(aadityataparia): Click Here

This superior jQuery/javascript plugin is developed by aadityataparia. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.