Responsive Slider

index.html

<header><h1>Responsive Slider</h1></header>
<section>

      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
            </div>
            <div class="slide slide-2">
              <img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints"  />
            </div>
            <div class="slide slide-3">
              <img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series"  />
            </div>
            <div class="slide slide-4">
              <img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea"  />
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>

    </section>

responsive-slider.markdown

Responsive Slider

Responsive jQuery Image Slider

A Pen by zhishaofei on CodePen.

License.

script.js

$('.slider').each(function() {              // For every slider
  var $this   = $(this);                    // Current slider
  var $group  = $this.find('.slide-group'); // Get the slide-group (container)
  var $slides = $this.find('.slide');       // Create jQuery object to hold all slides
  var buttonArray  = [];                    // Create array to hold navigation buttons
  var currentIndex = 0;                     // Hold index number of the current slide
  var timeout;                              // Sets gap between auto-sliding

  function move(newIndex) {          // Creates the slide from old to new one
    var animateLeft, slideLeft;      // Declare variables

    advance();                       // When slide moves, call advance() again

    // If it is the current slide / animating do nothing
    if ($group.is(':animated') || currentIndex === newIndex) {  
      return;
    }

    buttonArray[currentIndex].removeClass('active'); // Remove class from item
    buttonArray[newIndex].addClass('active');        // Add class to new item

    if (newIndex > currentIndex) {   // If new item > current
      slideLeft = '100%';            // Sit the new slide to the right
      animateLeft = '-100%';         // Animate the current group to the left
    } else {                         // Otherwise
      slideLeft = '-100%';           // Sit the new slide to the left
      animateLeft = '100%';          // Animate the current group to the right
    }
    // Position new slide to left (if less) or right (if more) of current
    $slides.eq(newIndex).css( {left: slideLeft, display: 'block'} );

    $group.animate( {left: animateLeft}, function() {    // Animate slides and
      $slides.eq(currentIndex).css( {display: 'none'} ); // Hide previous slide      
      $slides.eq(newIndex).css( {left: 0} ); // Set position of the new item
      $group.css( {left: 0} );               // Set position of group of slides
      currentIndex = newIndex;               // Set currentIndex to the new image
    });
  }

  function advance() {                     // Used to set 
    clearTimeout(timeout);                 // Clear previous timeout
    timeout = setTimeout(function() {      // Set new timer
      if (currentIndex < ($slides.length - 1)) { // If slide < total slides
        move(currentIndex + 1);            // Move to next slide
      } else {                             // Otherwise
        move(0);                           // Move to the first slide
      }
    }, 4000);                              // Milliseconds timer will wait
  }

  $.each($slides, function(index) {
    // Create a button element for the button
    var $button = $('<button type="button" class="slide-btn">&bull;</button>');
    if (index === currentIndex) {    // If index is the current item
      $button.addClass('active');    // Add the active class
    }
    $button.on('click', function() { // Create event handler for the button
      move(index);                   // It calls the move() function
    }).appendTo('.slide-buttons');   // Add to the buttons holder
    buttonArray.push($button);       // Add it to the button array
  });

  advance();                          // Script is set up, advance() to move it


});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);

body {
  background-color: #979797;
  color: #fff;
  margin: 0em;
  padding: 0em;}

.page {
  max-width: 640px;
  margin: 0px auto 30px auto;}

.panel {
  background-color: #fff;
  color: #666;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  overflow: auto;}

button {
  border: none;}

/********** LOGO **********/
h1 {
  text-align: center;
  width: 200px;
  height: 20px;
  margin: 40px auto 40px auto;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;}

/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}

h2, h3 {
  font-weight: normal;
  margin: 0em;}
h2 {
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 230%;
  line-height: 1em;
  padding: 20px 0px 0px 20px;}
h3 {
  font-size: 90%;
  letter-spacing: 0.2em;}

p {
  font-family: 'Quattrocento Sans', sans-serif;
  line-height: 1.4em;}

a {
    text-decoration: none;}

button {
  font-size: 90%;
  text-align: left;
  text-transform: uppercase;}

  /*****************  No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}

.no-js .js-warning {
  display: block;
  border: 3px solid #fff;
  text-align: center;
  background-color: #fff;
  color: #db5391;
  padding: 10px;}

/********** SLIDER **********/
.slider {
  max-width: 940px;
  margin: 0px auto 30px auto;}

.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}

.slide:first-child {
    display: block;}


/********** BUTTONS **********/
.slide-buttons {
  text-align: center;}

.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #ed8e6c;
  cursor: pointer;}