Minimal Mobile-friendly Carousel – Swiip.js

Category: Javascript , Slider | September 27, 2023
Views Total:364 views
Official Page:Go to website
Last Update:September 27, 2023


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 class="item">
    <img src="2.jpg" alt="img2">
  <div class="item">
    <img src="3.jpg" alt="img3">
  ... more slides here ...

3. Initialize the carousel with default options.

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

4. Customize the carousel with the following configuration options.

  // 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.

  responsive: [
      breakpoint: 1024,
      slidesToScroll: 2,
      slidesVisible: 4,
      gap: 1,
      autoPlay: true,
      autoPlaySpeed: 3000
    // ...



  • Update

You Might Be Interested In:

Leave a Reply