Simple Full Width Image Slider Plugin For jQuery

A super simple small jQuery plugin that lets you create a full width background image slider/carousel with fade transitions.  Fully controllable via data-* attributes.

How to use it:

1. Load jQuery library and the jQuery Simple Fullwidth Slider plugin in your web project.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="simplefullwidthslider.js"></script>

2. Add images and text into the slider following the html structure. You can pass the plugin options via data-* attributes in the parent container.

<div class="slider" 
     data-autoplay="0" 
     data-items="1" 
     data-easing="linear" 
     data-duration="750" 
     data-height="520">
  <div class="single_slide" style="background-image: url('1.jpg'); ;">
    <div class="slider_text"> </div>
  </div>
  <div class="single_slide active" style="background-image: url('2.jpg');">
    <div class="slider_text"> </div>
  </div>
  <div class=" single_slide" style="background-image: url('3.jpg');">
    <div class="slider_text"> </div>
  </div>
  <div class=" single_slide" style="background-image: url('4.jpg');">
    <div class="slider_text"> </div>
  </div>
  <div class=" single_slide" style="background-image: url('5.jpg');">
    <div class="slider_text"> </div>
  </div>
</div>

3. Add the following CSS snippets into your CSS file.

body { overflow-x: hidden }

.slider {
  list-style: none;
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider .single_slide {
  float: left;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0px;
  overflow: hidden;
  opacity: 0.15;
  width: 1260px;
  height: 520px;
  cursor: pointer;
  -webkit-transition: opacity 800ms ease-in-out;
  transition: opacity 800ms ease-in-out;
  background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
}

.slider .single_slide.active {
  opacity: 1;
  cursor: default;
  -webkit-transition: opacity 800ms ease-in-out;
  transition: opacity 800ms ease-in-out;
}

4. That's it. Click on the next/prev slide to cycle through thees images.

---

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