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">
    <li> Content 1 </li>
    <li> content 2 </li>
    <li> content 3 </li>

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="//"></script>
<script src="//"></script>
<script src="jquery.touchSlider.js"></script><br type="_moz">

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

<script src="//"></script>

5. Active the container slider with default options.


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

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

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

  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 : " +;

8. All the configuration options with default values.


  // 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.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-basedĀ icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…