Press "Enter" to skip to content

Simple Vanilla JS/CSS Horizontal Carousel | Carosans

Carosans is a lightweight, open-source JavaScript library for creating responsive, touch-enabled, horizontal carousels for mobile from HTML lists. This minimal layer of CSS, to make the carousel work, so you have to include carousel.css in your project.

pure css carousel slider, automatic image slider in html css, pure css carousel multiple items, javascript carousel, carousel html css javascript, css image carousel

How to make use of it:

1. Install the package with NPM and import the Carosans as follows:

# NPM
$ npm i carosans --save
import Carosans from 'carosans'
// stylesheet
import 'carosans/src/css/carosans.css'

2. Or load the compiled JavaScript and CSS information from the dist folder.

<link rel="stylesheet" href="dist/carosans.min.css" />
<script src="dist/carosans.min.js"></script>

3. Create a listing of carousel objects as follows:

<div class="carosans myCarousel">
  <ul>
    <li>
      // Add image Here
      <h2>Title 1</h2>
      <a href="#">Read more</a>
    </li>
    <li>
      // Add image Here
      <h2>Title 2</h2>
      <a href="#">Read more</a>
    </li>
    <li>
      //ย Addย imageย Here
      <h2>Title 3</h2>
      <a href="#">Read more</a>
    </li>
    ...
  </ul>
</div>

4. Initialize the Carosans and accomplished.

Carosans({
  selector: '.myCarousel'
})

5. Customize the kind of mouse cursor.

Carosans({
  selector: '.myCarousel',
  cursor: 'grab'
})

6. Determine whether or not the item routinely snaps to the edge after scrolled.

Carosans({
  selector: '.myCarousel',
  freeMode: true
})

7. Determine the transfer distance to set off the scrolling.

Carosans({
  selector: '.myCarousel',
  minMoveToChangePosition: 150
})

8. Create an auto carousel with the next() technique.

const carousel = Carosans({
      selector: '.myCarousel'
})
setInterval(() => {
  carousel.next()
}, 5000)

Horizontal List Carousel In JavaScript, Carosans Plugin/Github, automatic image slider in html css without javascript


See Demo And Download

ย 

Official Website(andrasna): Click Here

This superior jQuery/javascript plugin is developed by andrasna. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *