Simple Responsive Fading Slider With jQuery - Basic Slider

Basic Slider is a simple and responsive jQuery slider plugin that allows to fade through a group of mixed html content (images, text, divs, etc..) automatically or manually. Keyboard navigation is supported as well.

How to use it:

1. Add custom html content together with next and prev navigation buttons into the slider.

<div id="sliderContainer">

  <div id="prev" class="arrow"></div>

  <div id="slider">
    <div class="slide">
      <div class="slideCopy">
        <p>Description 1</p>
        <h2>Slide 1</h2>
      </div>
      <img src="1.jpg"> 
    </div>

    <div class="slide">
      <div class="slideCopy">
        <p>Description 2</p>
        <h2>Slide 2</h2>
      </div>
      <img src="2.jpg"> 
    </div>

    <div class="slide">
      <div class="slideCopy">
        <p>Description 3</p>
        <h2>Slide 3</h2>
      </div>
      <img src="3.jpg"> 
    </div>

  </div>

  <div id="next" class="arrow"></div>
  
</div>

2. The primary CSS styles for the slider.

#sliderContainer {
  position: relative;
  width: 90%;
  max-width: 972px;
  margin: 0 auto;
}

#slider {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  border: #DEDEDE solid 1px;
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}

#slider img {
  width: 100%;
  height: auto;
  display: block;
}

.slide {
  position: absolute;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.slide.active {
  position: relative;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.slideCopy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #fff;
  color: #333;
}

.slideCopy p { font-size: 18px; }

3. Style the navigation buttons.

.arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: #fff;
  margin: auto 0;
  cursor: pointer;
  z-index: 100;
  background-size: 10px;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

#prev {
  left: 30px;
  background-image: url(../img/arrow-left.png);
  background-position: 13px center;
  transform: translateX(20px);
  -webkit-transform: translateX(20px);
}

#next {
  right: 30px;
  background-image: url(../img/arrow-right.png);
  background-position: 16px center;
  transform: translateX(-20px);
  -webkit-transform: translateX(-20px);
}

.sliderHovered .arrow {
  opacity: 1;
  pointer-events: auto;
}

.sliderHovered #prev {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

.sliderHovered #next {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

4. Include jQuery library and the main JavaScript script.js at the bottom of the webpage. That's it.

<script src="jquery.min.js"></script>
<script src="js/script.js"></script>

5. Config the plugin at the beginning of the script.js file.

// Fade speed
var speed = 500;      

// Auto slider options
var autoSwitch = true;    

// Auto slider speed
var autoSwitchSpeed = 4000; 

// Pause auto slider on hover
var hoverPause = true;  

// Key press next/prev
var keyPressSwitch = true;  

---

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