A Pen by Wil Hall.

index.html

<div id="some-slider">
  <div class="someSlide currentSlide">
    <div class="sexyCageImg" style="background-image: url('http://wilhall.com/static/public/uploads/wallpaper-1994679.jpg')"></div>
  </div>
  <div class="someSlide">
    <div class="sexyCageImg" style="background-image: url('http://wilhall.com/static/public/uploads/wallpaper-1554016.jpg')"></div>
  </div>
  <div class="someSlide">
    <div class="sexyCageImg" style="background-image: url('http://wilhall.com/static/public/uploads/wallpaper-1994733.png')"></div>
  </div>
  <div class="someSlide">
    <div class="sexyCageImg" style="background-image: url('http://wilhall.com/static/public/uploads/wallpaper-2212196.jpg')"></div>
  </div>
  <div class="someSlide">
    <div class="sexyCageImg" style="background-image: url('http://wilhall.com/static/public/uploads/wallpaper-2249375.jpg')"></div>
  </div>
  <div class="someSlide">
    <div class="sexyCageImg" style="background-image: url('http://wilhall.com/static/public/uploads/wallpaper-2292421.jpg')"></div>
  </div>
</div>
<div id="controls">
<input type="text" id="gotonum" />
<button id="gotobutton">GoTo</button>
</div>

NickCageSliderExample.markdown

NickCageSliderExample

A Pen by Wil Hall on CodePen.

License.

script.js

// Helper function to return the first slide for the given slider
function getFirstSlide(sliderElem) {
  return sliderElem.find(".slide").eq(0);
}

// Helper function to get current slide for this slider
function getCurrentSlide(sliderElem) {
  return sliderElem.find(".currentSlide");
}

// Animate the given slider to the given slide
function animToSlide(sliderElem, slideNum) {
  
  // Get the current slide
  var currentSlide = getCurrentSlide(sliderElem);
  
  // Get the target slide
  var targetSlide;
  if(slideNum < sliderElem.data().slideCount) {
    // If the number if within the number of slides
    targetSlide = sliderElem.find(".slide").eq(slideNum);
  } else {
    // If the number is not within the number of slides, wrap to the first
    targetSlide = getFirstSlide(sliderElem);
  }
  
  console.log("Anim: " + currentSlide.index() + " --> " + targetSlide.index());
  
  // Position the target slide (currently invisible) above the current slide
  targetSlide.css({"z-index": 500});
  
  // Position the current slide under the target slide
  currentSlide.css({"z-index": 100});
  
  // Add currentSlide class to the target slide. Triggers CSS3 transition to start fading it in
  targetSlide.addClass("currentSlide");
  
  // Wait for the animation duration before removing the currentSlide class from the current slide
  // Ensures that target slide in fully visible before the current slide fades away
  setTimeout(function() {
    currentSlide.removeClass("currentSlide");
  }, sliderElem.data().animDuration);
}

// Start a timer for the slider with the given duration, and save a reference to it
function startSliderTimer(sliderElem, slideDuration) {
  // Save the timer to the slider's data in case we need to canel it later
  sliderElem.data({
    slideTimer: setTimeout(function() {
      
      sliderTickEvent(sliderElem);
      
    }, slideDuration)
  });
  
}

// Used to manually set the current slide of the given slider to the given slide
function setSlide(sliderElem, slideNum) {
  
  // Cancel if an attempt is made to switch to the current slide
  if(slideNum == getCurrentSlide(sliderElem).index()) {
    return;
  }
  
  // Get the current timer for this slider
  var slideTimer = sliderElem.data().slideTimer;
  
  // Stop it if it exists
  if(slideTimer !== undefined) {
    clearTimeout(slideTimer);
  }
  
  // Animate to the given slide
  animToSlide(sliderElem, slideNum);
  
  // Set a new timer
  startSliderTimer(sliderElem, sliderElem.data().slideDuration);
}

// This is called on a timer.
// Calls animToSlide to the next slide
function sliderTickEvent(sliderElem) {
  // Get current slide number by looking at DOM
  var currentSlide = getCurrentSlide(sliderElem).index();
  
  // Animate to the next slide
  animToSlide(sliderElem, currentSlide + 1);
  
  // Start a timer.
  startSliderTimer(sliderElem, sliderElem.data().slideDuration);
}

// Given an object of options, initialize a new slider
function initSlider(sliderOptions) {
  
  // Get the slider element
  var sliderElem = sliderOptions.sliderElem;
  
  // Take the slider container and add our generic class
  sliderElem.addClass("slider");
  
  // Take the slides and add our generic class
 sliderElem.find(sliderOptions.slideSelector).addClass("slide");
  
  // Apply slider sizing 
  sliderElem.css({
    width: sliderOptions.sliderWidth,
    height: sliderOptions.sliderHeight
  });
  
  // Apply transition effect to slide
 sliderElem.find(".slide").css({
    transition: "opacity " + sliderOptions.animDuration + "s " + sliderOptions.animTimingFunc
  });
  
  // Count the number of slides and save it in the slider options
  sliderOptions.slideCount = sliderElem.find(".slide").length;
  
  // Store the slider options on the slider element itself
  sliderElem.data(sliderOptions);
  
  //Start a timer for this slider
  startSliderTimer(sliderElem, sliderOptions.slideDuration);
}

$(document).ready(function(){

  var someSliderOptions = {
    
    //jQuery object for the slider container
    sliderElem: $("#some-slider"),
    
    //jQuery selector for a slide
    slideSelector: ".someSlide",
    
    //Slide duration in milliseconds
    slideDuration: 3000,
    
    // Animation duration in seconds
    animDuration: 0.5,
    
    // ease, ease-in, ease-out, ease-in-out, etc
    animTimingFunc: 'ease',
    
    sliderWidth: '400px',
    sliderHeight: 'auto'
  };
  
  initSlider(someSliderOptions);
  
  $("#gotobutton").click(function(){
    setSlide($("#some-slider"), $("#gotonum").val());
  });
  
});

style.scss

@import "compass";
.slider {
  position: relative;
  background-color: #CCCCCC;
  
  .slide {
    
    /* Prevent flicker in webkit browsers due to two elements being animated on top of each other */
    -webkit-backface-visibility: hidden;
    
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0.0;
    background-color: #CCCCCC;
    overflow: hidden;
    
    &.currentSlide {
      opacity: 1.0;
    }
  }
}

.sexyCageImg {
  width: 100%;
  height: 225px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#controls {
  position: absolute;
  bottom:0;
}