Simple Jquery Plugin: jQuery simple Next-Previous slider

Create index.html

<html>
<head>
<title>jQuery simple Next-Previous slider</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<style>
div {
 width: 50px;
 height: 80px;
 margin: 10px;
 float: left;
 border: 1px black solid;
 padding: 3px;/*overflow:hidden;*/
  }
.next1 {
 background:#0066FF;
 text-align:center;
 padding:10px;
 float:left;
 cursor:pointer;
}
.prev1 {
 background:#0066FF;
 text-align:center;
 padding:10px;
 float:left;
 cursor:pointer;
}
.mynew {
 height:100px;
 width:100px;
 margin:auto;
 background:#ddd;
}
.ref {
 height: 100px;
 margin: 0;
 padding: 0;
 width: 100px;
 display:none;
}
</style>
</head>
<body>
<p>click next to see the image</p>
<p>click prev to see previous image</p>
<span class="next1">Next</span>
<div class="mynew">
  <div id="start" class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/responsive/images/slider2.jpg" height="100" width="100"></div>
  <div id="end" class="ref"><img src="http://curdweb.com/navin/responsive/images/slider4.jpg" height="100" width="100"></div>
</div>
<span class="prev1">Prev</span>
<script>
var divc=$('.mynew');
var count=$('.mynew .ref').length;
var lelechacha=".mynew .ref:eq("+ (count-1) +")";
var $currPrevDiv   =$(lelechacha);

var $currDiv   =$('.mynew .ref:eq(0)');
$currDiv.css( "background", "" );
$currDiv .css( "background", "#333" );

var myFirstDiv=$currDiv;
var myLastDiv=$currPrevDiv;
 $currDiv.removeAttr('hidden');
$( ".next1" ).click(function() {
if(myLastDiv.attr('id')==$currDiv.attr('id')){
return;
}
  $currDiv  = $currDiv .next(); 
  $( ".mynew > div" ).css('display','none');
 
   $currDiv.css('display','block');
  $( "div" ).css( "background", "" );
  $currDiv .css( "background", "#333" );

});
 $( ".prev1" ).click(function() {
if(myFirstDiv.attr('id')==$currDiv.attr('id')){
return;
}
  $currPrevDiv  = $currDiv .prev();
  $( ".mynew > div" ).css('display','none');
 
   $currDiv.css('display','block');
    $currDiv  = $currPrevDiv;
  $( "div" ).css( "background", "" );
  $currPrevDiv .css( "background", "#333" );
 
  });
</script>
</body>
</html>

Monday, 13 July 2015

jQuery simple Next-Previous slider

Create index.html

No comments:

Post a Comment