Create Easy-to-touch jQuery Carousel Slider Plugin

A simple and easy-to-use jQuery slider plugin for building a carousel content library with support for slide/fade transitions, transparent annotations, auto-rotate slides, and custom slider controls.

jquery slider plugin free download, jquery slider carousel, jquery carousel slider example, jquery banner slider

Animations Experimental Slider Using SVG Clip-path | Elastic Slider

How to make use of it:

1. Include bjqs.css in the header containing the basic CSS styles needed to make the scrollbar.

<link rel="stylesheet" href="bjqs.css">

2. Include the jQuery simple-slider plugin script after the jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>

3. Add a list of photos to the slider and wrap it in a cover element.

<div id="my-slider">
  <ul class="bjqs">
    <li><img src="1.jpg" title="Caption 1"></li>
    <li><img src="2.jpg" title="Caption 2"></li>
    <li><img src="3.jpg" title="Caption 3"></li>
  </ul>
</div>

4. Call the plugin on the outer shell to create an image base carousel slider that automatically generates image captions from the title attribute of IMG tags.

$('#my-slider').bjqs();

5. All settings are default.

// w + h to enforce consistency
width: 700,
height: 300,

// fade or slider
animtype: 'fade',

// length of transition
animduration: 450,

// delay between transitions
animspeed: 4000, 

// enable/disable automatic slide rotation
automatic: true, 

// enable/disable next + previous UI elements
showcontrols: true, 

// vertically center controls
centercontrols: true, 

// text/html inside next UI element
nexttext: 'Next',   

// text/html inside previous UI element
prevtext: 'Prev',   

// enable/disable individual slide UI markers
showmarkers: true,  

// horizontally center markers
centermarkers: true, 

// enable/disable keyboard navigation
keyboardnav: true,  

// enable/disable pause slides on hover
hoverpause: true, 

// enable/disable captions using img title attribute
usecaptions: true, 

 // start from a random slide
randomstart: false,

// enable responsive behaviour
responsive: false

Basic Responsive Carousel Slider Plugin/Github