Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $("#slideRight").click(function() {
- $("#slider").animate({right:700});
- });
- $("#slideLeft").click(function() {
- $("#slider").animate({left:700});
- });
- <div id="slideButtons">
- <input type="button" value="next L" id="slideLeft" />
- <input type="button" value="next R" id="slideRight" />
- </div>
- <div id="slider">
- <img src="slideTest.jpg" alt="" />
- <img src="slideTest2.jpg" alt="" />
- <img src="slideTest3.jpg" alt="" />
- </div>
- #slider {
- height: auto;
- width: 700px;
- position: relative;
- background-color: blue;
- }
- // First make the first image visible
- $(".slide-content img:first-child").show();
- // Bind the click handler
- $("#slideRight").click(function() {
- // if there is only one image in the slider then return false
- if($(".slide-content > img").length == 1)
- {
- return false;
- }
- // Set current to the visible element
- var current = $(".slide-content > img:visible").attr('id');
- // hide the visible element
- $('#'+current).hide();
- if(current == $(".slide-content > img").length )
- {
- current = 1;
- }
- else
- {
- current = parseInt(current)+1;
- }
- $('#'+current).show();
- });
- $("#slideLeft").click(function() {
- if($(".slide-content > img").length == 1)
- {
- return false;
- }
- var current = $(".slide-content > img:visible").attr('id');
- $('#'+current).hide();
- if(current == 1)
- {
- current = $(".slide-content > img").length;
- }
- else
- {
- current = parseInt(current)-1;
- }
- $('#'+current).show();
- });
- <div id="slideButtons">
- <input type="button" value="next L" id="slideLeft" />
- <input type="button" value="next R" id="slideRight" />
- </div>
- <div class="slide-content">
- <img id = '1' src="slideTest.jpg" alt="" />
- <img id = '2' src="slideTest2.jpg" alt="" />
- <img id = '3' src="slideTest3.jpg" alt="" />
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement