Swipeable Image Carousel In Vanilla JavaScript – otslider

Preview:

Description:

A simple-to-use, mobile-friendly, fully-responsive and cross-browser image carousel slider written in Vanilla JavaScript and CSS/CSS3.

Features:

• Configurable Slide or Fade transitions.
• Numeric or Dots pagination.
• Custom navigation arrows.
• Supports RTL mode.
• Autoplay and autopause functionality.
• Supports swipe events on mobile devices.

How to use it:

1. Add references to otslider’s JavaScript and Stylesheet.

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

2. Insert images to the otslider container with the CSS class of ‘ot-slider’.

<div class="ot-slider">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  <img src="4.jpg" />
  ...
</div>

3. Initialize the library to create a default carousel slider.

var otslider = new OTSlider();
otslider.init();

4. You’re also allowed to initialize the carousel on any image container using the element option.

<div id="mySlider">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  <img src="4.jpg" />
  ...
</div>

otslider.init({
  element: document.getElementById('mySlider')
});

5. Config the slide or fade transition.

otslider.init({
  // or 'fade'
  transition : 'slide',
  // easing function
  transitionTiming: "ease",
  // duration in ms
  transitionDuration : 500
});

6. Customize the autoplay functionality.

otslider.init({
  duration: 2000,
  autoPlay : true,
  pauseOnHover : true
});

7. Customize the carousel controls.

otslider.init({
  // custom prev & next buttons
  prevButton : '«',
  nextButton : '»',
  // shows prev & next buttons or not
  showPrevNext : true,
  // shows pagination controls
  showNav : true,
  // uses rounded buttons
  roundButtons : false,
  // uses numeric pagination
  numericNav : true,
  // enables touch swipe events
  swipe : true
});

8. Set the direction of the carousel slider. Default: ‘ltr’.

otslider.init({
  direction: 'rtl'
});

9. Determine whether to auto adjust the carousel slider to fit the screen size. Default: true.

otslider.init({
  responsive : false
});

10. More configurations.

otslider.init({
  itemsToShow : 1,
  itemsScrollBy : 1,
  padding : 0,
  teasing : 0,
  swipeFreely : false,
  centered : false,
});

Changelog:

04/11/2023

• Update

v2.1.0 (03/06/2021)

• Fixed the issue that was ocasionally positionate incorrectelly the last items displayed, on “slide” transition after swipe, when “itemsToShow” is higher than 1.
• Fixed the issue that was ocasionally cause otSlider to not load.
• The default width and height values were removed from optional configs object. If the width is not specified, otSlider will set it to be the same as its parent element. While if the height is not specified, it will be determined by items’ height (images’ height, etc.).
• Changed the default arrows on previous and next buttons to “〈” and “〉” unicodes respectively.
• Bugs fixes.

v2.0.0 (12/12/2020)

• The responsive features was significantly improved.
• Added 6 new elements to the optional configs object (itemsToShow, itemsScrollBy, padding, teasing, centered, swipeFreely).
• The swipe feature was rewriten.
• The “slide” transition for old Web Browsers that doesn’t support CSS3 transition, was rewriten.
• Fixed the issue that was prevent otSlider to swipe to the left when multiple instances initialized.
• The file size was slightly reduced. Thanks to the rewrite of some features.
• Bugs fixes.