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.