Lightweight Background Slideshow Plugin with jQuery and CSS3 - pureSlider

pureSlider is a small and simple jQuery / Zepto background image slider plugin that utilizes CSS3 transitions and transforms for subtle image zoom transition effects.

How to use it:

1. Place jQuery / Zepto library and the jQuery pureSlider plugin in your web page.

<script src="jquery.min.js"></script>
<!-- or zepto.js -->
<script src="pureSlider.js"></script>

2. The html structure to build a background image slider.

<div class="container">
  <div class="slide" style="background-image: url('1.jpg')">This is slide One</div>
  <div class="slide" style="background-image: url('2.jpg')">This is slide Two</div>
  <div class="slide" style="background-image: url('3.jpg')">This is slide Three</div>
  <div class="slide" style="background-image: url('4.jpg')">This is slide Four</div>
  <div class="ns-next"></div>
  <div class="ns-prev"></div>
</div>

3. Initialize the plugin.

$('.container').pureSlider();

4. Add the basic CSS styles to the background image slider.

.container {
  display: block;
  position: relative;
  top: 33%;
  width: 100%;
  padding-bottom: 33%;
  border: none;
  overflow: hidden;
}

.slide {
  transition: 500ms ease all;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(2);
}

.slide.active {
  transform: scale(1);
  opacity: 1;
  top: 0;
  transition: 500ms ease all;
}

.ns-next,
.ns-prev {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-color: rgba(0,0,0,.65);
}

.ns-next {
  right: 25px;
  z-index: 10;
}

.ns-prev {
  left: 25px;
  z-index: 10;
}

5. Available options with default values.

$('.container').pureSlider({

// animation speed
animDuration:  500,

// transition delay
slideDuration:  2500,

// CSS selectors
slideNode: 'div.slide',
nextButton: '.ns-next',
prevButton: '.ns-prev',
activeClass: 'active',

// Show "Left", "Right" navigation
showNavigation: false

});

Change logs:

2016-07-17

• JS & CSS update

2016-07-08

• Fixed Active class is set twice on consecutive slides

2016-06-29

• Fixed transition

2016-01-17

• Code refactoring, removal of navigation for less that two slides.

2015-12-15

• Don't crash when there are no slides on stage

2015-12-08

• Fix for Opera 12

2015-10-11

• Fixes and class name change

2015-09-20

• Z-index handling removal, new 'activaded' state.

---

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