EasySlides is a premium jQuery slider plugin for creating responsive, mobile-compatible content carousels with minimal coding.

image slider plugin, responsive slider download, jquery slider plugin, vertical slider free download, gallery slider plugin, responsive image slider jquery

How to make use of it:

1. To illustrate this, include the following JavaScript and CSS files on the web page.

<link href="jquery.easy_slides.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.easy_slides.js"></script>

2. Create a base library that displays one slide at a time.

<div class="slider slider_one_big_picture">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="next_button">NEXT</div>  
  <div class="prev_button">PREV</div>  
  <div class="nav_indicators"></div>
 </div>

$('.slider_one_big_picture').EasySlides()

3. Create a flow pattern rotating cap.

<div class="slider slider_circle_10">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="next_button">NEXT</div>  
  <div class="prev_button">PREV</div>  
 </div>

$('.slider_circle_10').EasySlides({
  'show': 13 // the number of slides to show
})

4. Create a horizontal slider that displays four slides at a time.

<div class="slider slider_four_in_line">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="next_button">NEXT</div>  
  <div class="prev_button">PREV</div>  
 </div>

5. Create a circular rotating axis of the clock.

<div class="slider slider_clock">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div class="next_button">NEXT</div>  
  <div class="prev_button">PREV</div>  
 </div>

$('.slider_clock').EasySlides({
  'show': 15
})

6. All default customization options.

{
  'autoplay': false,
  'timeout': 3000,
  'show': 5,
  'vertical': false,
  'reverse': false,
  'touchevents': true,
  'delayaftershow': 300,
  'stepbystep': true,
  'startslide': 0,
  'loop': true,
  'distancetochange': 10,
  'beforeshow': function () {},
  'aftershow': function () {},
}

• autoplay – if “true” slides will change automaticly. Default – true.
• loop – if “true” slides will change looped. Default – true.
• timeout – if “autoplay” is “true” this is delay time. Default – 3000.
• show – how many slides showed. Default is 5: 2 – previos (have class “prev”), 1 – active (have class “active”), 2 – next slides (have class “next”), another slides is hidden (have class “hidden”).
  vertical – if “true” slider will be vertical (touch evens to change slide is up and down move).
• Default – false.
• reverse – if “true” slider will be reversed. Default – false.
• touchevents – if “true” touch events is work (change slides by touch/mouse move). Default – true.
• delayaftershow – time after change slide when slides not change. Default – 300.
• stepbystep – if “true” when user click on slide not next or prev – slides will be changes step by step while not showed clicked slide. Default – true.
• startslide – number of started slide (first slide is 0). Default – 0.
• beforeshow – function before change slide
• aftershow – function after change slide

Versatile Touch-enabled Slider Plugin With jQuery, EasySlides Github, auto product slider jquery, jquery slider library

See Demo And Download

Official Website(IvanShabanov): Click Here

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