Fully Configurable & Responsive jQuery Carousel Plugin - DrSlider

The Devrama Slider jQuery plugin makes it easier to create responsive, flexible, configurable slider/carousel for showcasing any html elements on your webpage.

Main Features:

• Supports any types of html content: images, text, tables, etc.
• Highly customizable carousel controls: navigation, pagination.
• Auto play with progress bar and pause on hover support.
• Image lazy loading support.
• CSS3 powered smooth transition effects: random, slide-left, slide-right, slide-top, slide-bottom, fade, split, split3d, door, wave-left, wave-right, wave-top, wave-bottom

Basic usage:

1. Insert a collection of images into the carousel using data-lazy-src attribute as follow:

<div id="my-slider">
  <img data-lazy-src="1.jpg">
  <img data-lazy-src="2.jpg">
  <img data-lazy-src="3.jpg">
  ...
</div>

2. Put jQuery library and the jQuery Devrama Slider plugin's script at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.devrama.slider.js"></script>

3. Initialize the carousel plugin with default options.

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

4. Customize the carousel controls.

$('#my-slider').DrSlider({
  //if this is true, 'Previous, Next Buttons and Navigation CSS' will not be applied. 
  // User should define CSS in their css file.
  userCSS: false, 
  showNavigation: true,
  classNavigation: undefined,
  navigationColor: '#9F1F22',
  navigationHoverColor: '#D52B2F',
  navigationHighlightColor: '#DFDFDF',
  navigationNumberColor: '#000000',
  // 'out-center-bottom', 'out-left-bottom', 'out-right-bottom', 'out-center-top', 'out-left-top', 'out-right-top',
  // 'in-center-bottom', 'in-left-bottom', 'in-right-bottom', 'in-center-top', 'in-left-top', 'in-right-top',
  // 'in-left-middle', 'in-right-middle'
  positionNavigation: 'out-center-bottom',
  // number, circle, square
  navigationType: 'number', 
  showControl: true,
  classButtonNext: undefined,
  classButtonPrevious: undefined,
  controlColor: '#FFFFFF',
  controlBackgroundColor: '#000000',
  // 'left-right', 'top-center', 'bottom-center', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
  positionControl: 'left-right', 
});

5. Customize the transition effects.

$('#my-slider').DrSlider({
  transitionSpeed: 1000,
  duration: 4000,
  //random, slide-left, slide-right, slide-top, slide-bottom, fade, split, split3d, door, wave-left, wave-right, wave-top, wave-bottom
  transition: 'slide-left', 
  pauseOnHover: true
});

6. Customize the progress bar that indicate the remaining time the carousel will slide to the next.

$('#my-slider').DrSlider({
  showProgress: true,
  progressColor: '#797979'
});

7. If you'd like to specify the fixed height/width.

$('#my-slider').DrSlider({

  //initial width, automaticall ycalculated once the first image is loaded
  width: undefined, 

  //initial height, automatically calculated once the first image is loaded
  height: undefined
  
});

---

This awesome jQuery plugin is developed by Devrama. For more Advanced Usages, please check the demo page or visit the official website.