Press "Enter" to skip to content

[otSlider] A Simple, Mobile-Friendly Image Carousel | OneTime Slider

OneTime Slider (otSlider) is a powerful and intuitive slider built from Vanilla JS, which is suitable for any kind of web application. It supports many features like swipe scroll, multi-effects, and many more.

mobile friendly slider, image carousel website, flickity carousel, responsive automatic image slider in html, responsive image slider with text, image gallery slider

Features:

  • Configurable slides or transitions fade.
  • Numeric or point numbering.
  • Custom Navigation Arrows.
  • Supports RTL mode.
  • Auto starts and stop functions.
  • Supports swipe events on mobile devices.

How to make use of it:

1. Add references to the otslider JavaScript and Stylesheet.

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

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

<div class="ot-slider">
  // Add Images Here
  ...
</div>

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

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

4. You’re additionally allowed to initialize the carousel on any picture container utilizing the component option.

<div id="mySlider">
  // Add Images Here
  ...
</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 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.

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

9. Determine whether or not to auto modify the carousel slider to fit the display size.

otslider.init({
  responsive : false
});

Swipeable Image Carousel In Vanilla JavaScript, CSS swipe carousel, OneTime Slider(otSlider) Plugin/Github, bootstrap image slider gallery, carousel slider


See Demo And Download

Official Website(iniohd): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.