Minimal Mobile-friendly Carousel – Swiip.js

Swiip.js is a minimal yet powerful image carousel written in Vanilla Javascript.

It can help developers create responsive, interactive, and touch-enabled carousels with various configurations, such as auto-rotation, adjustable scroll quantities, and the ability to define specific carousel behaviors at different screen breakpoints.

How to use it:

1. Load the Swiip’s Javascript and Stylesheet in the HTML.

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

2. Add your images as slides to the carousel.

<div class="myCarousel">
  <div class="item">
    <img src="1.jpg" alt="img1">
  </div>
  <div class="item">
    <img src="2.jpg" alt="img2">
  </div>
  <div class="item">
    <img src="3.jpg" alt="img3">
  </div>
  ... more slides here ...
</div>

3. Initialize the carousel with default options.

const container = document.querySelector(".myCarousel");
container.Swiip();

4. Customize the carousel with the following configuration options.

container.Swiip({
  // selector of prev/next buttons
  prevBtn: null,
  nextBtn: null,
  // number of slides to scroll at a time
  slidesToScroll: 1,
  // numer of slides per view
  slidesVisible: 4,
  // enable autoplay
  autoPlay: true,
  autoPlaySpeed: 3000,
  // distance between slides
  gap: 0,
  
});

5. Define a responsive array to customize the carousel’s behavior at different screen sizes. Properties like slidesToScroll, autoPlay and gap can be set for each breakpoint.

container.Swiip({
  responsive: [
    {
      breakpoint: 1024,
      slidesToScroll: 2,
      slidesVisible: 4,
      gap: 1,
      autoPlay: true,
      autoPlaySpeed: 3000
    },
    // ...
  ]
});

Changelog:

09/27/2023

• Update