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="//"></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>

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.


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

See Demo And Download

Official Website(imkanye): Click Here

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

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…