jQuery Easy Slider | Lessoncup Programming Blog

Tuesday, 26 November 2013

jQuery Easy Slider

Hi, today i am going to show you a simple image slider using jquery, we can found lot of jquery sliders available if you start search, some of them will suitable to your requirement and some will get conflict with your code. but this is a simple and basic slider were you can keep it in your site easily and easy to mange the slider positions, image sizes as par your requirement.




HTML

take the div and give it ID name #slider now take the list of images inside the slider div, and take two more div's to slide the image from NEXT to PREV give it id names #next and #prev
<div id="lessoncup">

<div id="slider">
<ul>
<li><img src="img/1.jpg" width="600" height="300"></li>
<li><img src="img/2.jpg" width="600" height="300"></li>
<li><img src="img/3.jpg" width="600" height="300"></li>
<li><img src="img/4.jpg" width="600" height="300"></li>
</ul>
</div>

<div id="next" class="but">Prev</div>
<div id="prev" class="but">Next</div>

</div>

CSS

here the styles play a key role to slider, write the style to slider div make sure overflow:hidden must to this div, and write the style to UL tag and give width:3000px to keep the all images and position:absolute is must, to LI tag apply float:left.

and apply the styles to NEXT and PREV buttons to give better look and make sure this two positions are in absolute mode and align their positions to fit to slider frame.
<style>

#lessoncup{ width:600px; height:300px; color:#000; background-color:#FFF;box-shadow:0 0 10px #CCC; border:solid #CCC 1px;font-family:Tahoma, Geneva, sans-serif;font-size:12px; color:#666;margin:0 auto; margin-top:100px; position:relative;}

#slider{width:600px; height:300px;overflow:hidden; position:absolute;}

ul{ list-style:none; margin:0; padding:0; position:absolute; width:3000px;}

ul li{ float:left;}

#next{cursor:pointer; background-color:rgba(255,255,255,0.8);padding:10px; width:30px;position:absolute; top:130px; display:none;}

#prev{cursor:pointer; background-color:rgba(255,255,255,0.8);padding:10px; width:30px;position:absolute; top:130px; right:0;}

</style>

JAVASCRIPT

write the click function to #next div as a selector, here we need to know the left position of UL tag and with that we are going to animate the UL tag form left to right and right to left, use offset() method to get the positions of div. and use animate() method to animate the UL tag from right position to left position, use addition operator when we click on buttons each click it will increment the value and animate the UL tag from left to right side
plus = $('ul').offset().left += 220; $('ul').animate({left: plus}, 500);
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){
 
 
 $('#next').click(function(){
  
  $('#prev').fadeIn("slow"); 
  
  var plus = $('ul').offset().left;
  
  if(plus >= 380){
   
  $('#next').fadeOut("slow"); 
  
  }else{

  var plus = $('ul').offset().left += 220;
  
  $('ul').animate({left: plus}, 500);
  
  }
  
 });
 
 
 $('#prev').click(function(){
  
  $('#next').fadeIn("slow");
  
  var plus = $('ul').offset().left;
  
  if(plus <= -1420){
   
  $('#prev').fadeOut("slow");
   
  }else{
  
  var minu = $('ul').offset().left -=980;
  
  $('ul').animate({left: minu}, 500);
  
  }
  
 });
 

});

</script>

Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons