Responsive Full Page Background Slideshow Plugin With jQuery - reSlider

File Size: 10.2 KB
Views Total: 6199
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Full Page Background Slideshow Plugin With jQuery - reSlider

reSlider is a responsive fullscreen jQuery slideshow/carousel plugin that cycles through a set of background images with arrows navigation and bullets pagination. The images will be auto re-sized and re-centered on window resize to fit any screen size.

How to use it:

1. The html structure to create a slideshow containing a set of background images specified in the data-url atrribute.

<div class="slider">
  <div class="jquery-reslider">
    <!-- Slides -->
    <div class="slider-block" data-url="1.jpg"></div>
    <div class="slider-block" data-url="2.jpg"></div>
    <div class="slider-block" data-url="3.jpg"></div>
    <div class="slider-block" data-url="4.jpg"></div>
    <!-- Next/prev arrows navigation -->
    <div class="slider-direction slider-direction-next"></div>
    <div class="slider-direction slider-direction-prev"></div>
    <!-- Pagination bullets -->
    <div class="slider-dots">

2. Load jQuery library and the jQuery reSlider plugin at the bottom of the web page.

<script src="//"></script>
<script src="assets/js/jquery.reslider.js"></script>

3. To enable the background slideshow just call the plugin on the parent element.


4. The required CSS styles for the slideshow.

.slider .jquery-reslider .slider-block {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 97;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;

.slider .jquery-reslider .slider-direction {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 45%;
  z-index: 99;
  cursor: pointer;

.slider .jquery-reslider .slider-direction.slider-direction-prev {
  left: 20px;
  background: url('../images/prev.png') no-repeat;

.slider .jquery-reslider .slider-direction.slider-direction-next {
  right: 20px;
  background: url('../images/next.png') no-repeat

.slider .jquery-reslider .slider-dots {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 80px;

.slider .jquery-reslider .slider-dots li {
  width: 15px;
  height: 15px;
  border-radius: 100px;
  display: inline-block;
  margin: 10px;
  border: 1px solid #ffffff;
  cursor: pointer;

.slider .jquery-reslider .slider-dots { background-color: #ffffff; }

@media screen and (max-width: 768px) {

.slider .jquery-reslider .slider-direction { zoom: .8; }

.slider .jquery-reslider .slider-dots { position: absolute; }


5. Customization options.


 // animation speed

// transition delay between slides

// the number of background images

// display pagination bullets

// enable autoplay on initialize


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