Horizontal List Carousel In JavaScript – Carosans

Preview:

Description:

Carosans is a lightweight and open-source JavaScript library to create horizontal, responsive, mobile touch enabled carousels from HTML lists.

Users can scroll through list items using mouse drag or touch-swipe events just like a horizontal scroller.

How to use 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 files from the dist folder.

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

3. Create a list of carousel items as follows:

<div class="carosans myCarousel">
  <ul>
    <li>
      <img src="1.jpg" alt="image">
      <h2>Title 1</h2>
      <a href="#">Read more</a>
    </li>
    <li>
      <img src="2.jpg" alt="image">
      <h2>Title 2</h2>
      <a href="#">Read more</a>
    </li>
    <li>
      <img src="3.jpg" alt="image">
      <h2>Title 3</h2>
      <a href="#">Read more</a>
    </li>
    ...
  </ul>
</div>

4. Initialize the Carosans and done.

Carosans({
  selector: '.myCarousel'
})

5. Customize the type of mouse cursor.

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

6. Determine whether the item automatically snaps to the edge after scrolled. Default: false.

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

7. Determine the move distance to trigger the scrolling. Default: 100.

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

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

const carousel = Carosans({
      selector: '.myCarousel'
})

setInterval(() => {
  carousel.next()
}, 5000)