Swipeable Image Carousel In Vanilla JavaScript – otslider

Category: Javascript , Slider | September 18, 2020
Author:iniohd
Views Total:227 views
Official Page:Go to website
Last Update:September 18, 2020
License:MIT

Preview:

Swipeable Image Carousel In Vanilla JavaScript – otslider

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 : '&laquo;',
  nextButton : '&raquo;',
  // 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
});

You Might Be Interested In:


Leave a Reply