Mobile-first Automatic Swiper/Carousel Plugin - jQuery stonehenge.js

File Size: 5.62 KB
Views Total: 1490
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Mobile-first Automatic Swiper/Carousel Plugin - jQuery stonehenge.js

stonehenge.js is a lightweight jQuery plugin for creating automatic, horizontal, draggable, and swipeable carousels/scrollers to showcase your content smoothly and interactively.

How to use it:

1. Insert jQuery library and the stonehenge.js plugin's files into the HTML document.

<link rel="stylesheet" href="/path/to/dist/stonehenge.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/stonehenge.js"></script>

2. Add your content to the stonehenge container as follows:

<div class="stonehenge">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  ... more items here ...
</div>

3. Call the function on the top container to generate a basic carousel/swiper/scroller.

$(function(){
  $('.stonehenge').stonehenge();
});

4. Config the scorlling animation.

$('.stonehenge').stonehenge({

  // animation speed
  speed: 1.0,

  // config the auto-scroll behavior
  autoscroll: false,
  autoscrollOnce: true,
  autoscrollSpeed: 20,
  autoscrollPeriod: 500,
  autoscrollEasing: 'linear',
  
});

Changelog:

v0.0.19 (2023-09-25)


This awesome jQuery plugin is developed by LimestoneSoftware. For more Advanced Usages, please check the demo page or visit the official website.