Seamless Background Carousel Plugin For jQuery - Slider.js

Just another jQuery slider/carousel/slideshow plugin that allows for sliding through a series of background images with smooth transitions.

How to use it:

1. To get started, you need to load the following JavaScript and CSS files in the html document.

<link rel="stylesheet" href="css/jquery.slider.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.slider.js"></script>

2. Create a placeholder element for the slider.

<div class="testSlider"></div>

3. Initialize the plugin and replace the default background images (and links) with your owns.

$('.testSlider').slider({
  source: [
    {
      src: 'img/slider1.jpg', 
      hasHref: true, 
      href: '#',     
      hrefTarget: '_self' 
    },
    {
      src: 'img/slider2.jpg',
      hasHref: false,
      hrefTarget: '_self',
    },
    {
      src: 'img/slider3.jpg',
      hasHref: false,
      hrefTarget: '_self',
    },
    {
      src: 'img/slider4.jpg',
      hasHref: true,
      href: '#',
      hrefTarget: '_blank'
    }
  ]
});

4. Customize the slider by passing the following options to the slider() method.

$('.testSlider').slider({

  // width/height of slider
  width:          1200,
  height:           500,

  // active index
  activeIndex:      0,

  // transition delay
  speed:          800,

  // duration of animation
  durantion:        3000,

  // shows navigation buttons
  showSlider:       true,

  // shows pagination
  showOrigin:       true,

  // pagination type
  originType:       'circle',

  // position of pagination links
  originPosition:     'right',

  // background properties
  backgroundSize:     'cover',
  backgourndPosition:   'center center',

  // CSS classes of navigation buttons
  selectLeftClassName:  'dw-icon-left',
  selectRightClassName:   'dw-icon-right',

});

Change log:

2017-07-06

• JS improvement

---

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