Basic Cross-fading Image Slider Plugin With jQuery - SimpleEasySlider

File Size: 6.8 KB
Views Total: 1289
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Cross-fading Image Slider Plugin With jQuery - SimpleEasySlider

A simple and easy-to-use jQuery slider plugin that makes it easy to create a responsive, automatically cross-fading image slider / slideshow for your featured photos/content.

How to use it:

1. Insert jQuery library and the jQuery SimpleEasySlider plugin into the webpage.

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

2. Insert the following HTML snippets in the webpage, put the pictures inside "slides" div, you can load as many pictures as wanted. you can also have a title and a subtitle for each slide.

<div class="slider">

  <div class="sliderControll">
    <div class="SlNextBT"></div>
    <div class="SlPreviousBT"></div>
  </div>
      
  <div class="slides">
    <div>
      <img src="0.jpg" >
      <p class="sliderTitle">A Simple Title</p>
      <p class="sliderSubTitle">An Easy Subtitle</p>
      <span class="sliderOverlay"></span>
    </div>
    <div>
      <img src="1.jpg" >
      <p class="sliderTitle">A Simple Title</p>
      <p class="sliderSubTitle">An Easy Subtitle</p>
      <span class="sliderOverlay"></span>
    </div>
    <div>
      <img src="2.jpg" >
      <p class="sliderTitle">A Simple Title</p>
      <p class="sliderSubTitle">An Easy Subtitle</p>
      <span class="sliderOverlay"></span>
    </div>
  </div>
  
</div>

3. The primary CSS styles for the slider. Feel free to override & modify the CSS styles as displayed below and insert them into your CSS file.

/***********************************************************************************************/
/* slider */
/***********************************************************************************************/


.slider {
  width: 100%;
  height: 650px;
  margin: 0 auto;
  background-color: white;
  overflow: hidden;
}

.slides img { width: 100%; }

/***********************************************************************************************/
/*navigation*/
/***********************************************************************************************/

.sliderControll {
  width: 97%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: 55%;
  margin-top: -48px;
  z-index: 3;
}

.SlPreviousBT {
  width: 40px;
  height: 40px;
  background: url("../img/left.png") top;
  background-repeat: no-repeat;
  float: left;
  cursor: pointer;
}

.SlPreviousBT:hover { background: url("../img/left.png") bottom; }

.SlNextBT {
  width: 40px;
  height: 40px;
  background: url("../img/right.png") top;
  background-repeat: no-repeat;
  float: right;
  cursor: pointer;
}

.SlNextBT:hover { background: url("../img/right.png") bottom; }

/***********************************************************************************************/
/* Coloroverlay */
/***********************************************************************************************/


.sliderOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(32,26,22,.7);
  z-index: 1;
  width: auto;
  height: 650px;
  pointer-events: none;
}

/***********************************************************************************************/
/* Coloroverlay */
/***********************************************************************************************/

.sliderTitle {
  position: absolute;
  top: 240px;
  left: 0px;
  right: 0px;
  font-size: 86px;
  line-height: 1.1em;
  text-transform: none;
  letter-spacing: 0px;
  font-weight: 300;
  font-style: normal;
  color: #fff;
  z-index: 2;
}

.sliderSubTitle {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 350px;
  font-size: 27px;
  line-height: 1.6em;
  letter-spacing: .5px;
  font-weight: 300;
  font-style: normal;
  color: #9c9999;
  z-index: 2;
}

4. You are done with the basic setup, Title, subtitle, color overlay effect and navigation can be easily turned off by easyOptions() function. Just write it on your page after the plugin's JS file.

easyOptions(true, true, true, true);

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