Custom jQuery Slider 2

custom-jquery-slider-2.markdown

Custom jQuery Slider 2

A great easy little script to create a great looking jQuery slider without the weight! Easy to modify and very easy to implement!

Happy Coding!

A Pen by Justin Batzel on CodePen.

License.

index.html

<h1>Custom jQuery Slider 2</h1>

<div id="photoShowContainer">
  <div id="photoShowWrap">
    <div id="photoShow">
      
        <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/137120/shot_1301059844.jpg"/>
      
        <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/304344/tony-the-tiger.jpg"/>
      
        <img id="one" src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/308970/toucan-sam.jpg"/>
    </div>
  </div>
</div>

<p>Images by <a href="http://dribbble.com/search?page=1&q=Matt+Kaufenberg.">Matt Kaufenberg</a> on Dribble</p>

script.js

$(document).ready(function() {
  setInterval(rotateImages, 4000);
});

function rotateImages(){
  $("#photoShow").animate({marginLeft: "-400px"}, 1000).delay(4000);
  
  $("#photoShow").animate({marginLeft: "-800px"}, 1000).delay(4000);
  
  $("#photoShow").animate({marginLeft: "0px"}, 1000).delay(4000);
}

scripts

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

style.css

@import url(https://fonts.googleapis.com/css?family=Bangers);

body{
 background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/px_by_Gre3g.png); 
}

h1{
  color: #fff;
  font-family: 'Bangers', cursive;
  font-size: 50px;
  text-align: center;
}

p{
  color: #fff;
  font-family: arial, san-serif;
  font-size: 14px;
  text-align: center;
}

p a{
  color: #fff;
}

#photoShowContainer{
  border: 5px solid #fff;
  margin: 30px auto 0px auto;
  position: relative;
  width: 400px;
  
  -moz-box-shadow: 0px 0px 25px black;
  -webkit-box-shadow: 0px 0px 25px black;
  box-shadow: 0px 0px 25px black;
}

#photoShowWrap{
  height: 300px;
  overflow: hidden;
   position: relative;
  width: 100%;
  z-index: 1;
}

#photoShow{
  height: 300px;
	position: relative;
  width: 1200px;
}

#photoShow img{
  float: left;
  height: 300px;
  width: 400px;
}