Press "Enter" to skip to content

Responsive Customizable Content Slider Using jQuery Plugin | touchSlider

The touch slider is a simple and flexible jQuery plugin to create a responsive touch slider that supports any type of HTML element and makes it easy to create touch scroll bars.

Main Features:

  • Flicking navigation plugin based on jQuery
  • There are no restrictions on choosing coding elements and are designed for beginners to use with ease.
  • Multiple application is possible according to CSS Selector
  • Available via Cloud in Computer Browser (Included as default v1.3.0)
  • Support jQuery 1.7+, IE7 +

How to make use of it:

1. Create a list of HTML components and the wrap it right into a DIV container.

<div id="touchSlider">
  <ul>
    <li> Content 1 </li>
    <li> content 2 </li>
    <li> content 3 </li>
    ...
  </ul>
</div>

2. Apply custom CSS classes to the slider.

#touchSlider {
  width: 100%;
  height: 150px;
  margin: 0 auto;
  background: #ccc;
  position: relative;
  overflow: hidden;
}

#touchSlider ul {
  width: 99999px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#touchSlider ul li {
  float: left;
  width: 100%;
  height: 150px;
  background: #9C9;
  font-size: 14px;
  color: #fff;
}

3. Load jQuery library and the jQuery touchSlider plugin on the finish of the doc.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="jquery.touchSlider.js"></script><br type="_moz">

4. Load the jQuery.event.drag library for drag assists on desktop.

<script src="//cdn.jsdelivr.net/jquery.event.drag/2.2/jquery.event.drag.min.js"></script>

5. Active the container slider with default options.

$("#touchSlider").touchSlider();

6. Add a slide counter and custom prev / next navigation arrows to the slider.

$("#touchSlider").touchSlider({
  btn_prev : $("#touchSlider").next().find(".btn_prev"),
  btn_next : $("#touchSlider").next().find(".btn_next"),
  counter : function (e) {
    $("#count").html("current : " + e.current + ", total : " + e.total);
  }
});

7. Config the plugin to permit more than 5 items in one slide.

$("#touchSlider").touchSlider({
  view : 5,
  btn_prev : $("#touchSlider").next().find(".btn_prev"),
  btn_next : $("#touchSlider").next().find(".btn_next"),
  counter : function (e) {
    $("#count").html("current : " + e.current + ", total : " + e.total);
  }
});

8. All the configuration options with default values.

$("#touchSlider").touchSlider({

  // whether to use mouse
  useMouse: true,

  // or 'fade'
  mode: 'swipe'

  // infinite scroll
  roll: true,

  // flexible layout
  flexible: true,

  // auto resize
  resize: false,

  // custom controls
  btn_prev: null,
  btn_next: null,
  controls: true,

  // animation speed
  speed: 75,

  // how many items in one slide
  view: 1,

  // space between slides
  gap: 0,

  // distance to trigger the sliding
  range: 0.15,

  // show page controls
  paging: true,

  // init page
  page: 1,

  // slides pages
  sidePage: false,

  // enable CSS3 transitions
  transition: true,

  // callback
  initComplete: null,

  // autoplay settings
  autoplay: {
    enable: false,
    pauseHover: true,
    addHoverTarget: "",
    interval: 3500
  },

  // an object containing settings for different screens
  breakpoints: null,

  // called after init
  initComplete: null,

  // called after destroy
  destroyComplete: null

  // called after passing the slider
  counter: null,
  
});

Mobile-friendly Slider Plugin with jQuery, Touch Slider Plugin/Github


See Demo And Download

Official Website(dohoons): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *