Hello,
I'm trying to implante right and left arrows navigation on my horizontal webpage but the problem nothing happens when I click on arrows. Here's my fiddle in case of : http://jsfiddle.net/jarod51/StZR4/9/
Do you have any idea how to solve it ?
My jquery code is :
$(document).ready(function() { var $item = $('div.slide'), //Cache your DOM selector visible = 1, //Set the number of items that will be visible index = 0, //Starting index endIndex = ( $item.length / visible ) - 1; $('.flscrolld').click(function(){ if(index < endIndex ){ index++; $item.animate({'left':'-=300px'}); } }); $('.flscrolll').click(function(){ if(index > 0){ index--; $item.animate({'left':'+=300px'}); } }); });
I defined my previous and next arrows like that in my css :
- .flscroll {
- display:block;
- height: 83px;
- opacity: 0.8;
- position: fixed;
- top: 40%;
- z-index: 1000;
- }
- .ie8 .flscroll {
- filter: alpha(opacity=80);
- }
- #flscrollg {
- background: url(images/sprite.png) no-repeat 50px -100px;
- left: -30px;
- padding-left: 50px;
- width: 52px;
- }
- #flscrolld {
- background: url(images/sprite.png) no-repeat left -200px;
- padding-right: 50px;
- right: -30px;
- width: 53px;
- }
the structure of my html looks like that :
- <!--the menu-->
- <div id="banner">
- <ul>
- <li><a href="#home">Home</a></li>
- <li><a href="#newsletter">Newsletter</a></li>
- <li><a href="#directions">Directions & Opening Hours</a></li>
- <li><a href="#contact">Contact us</a></li>
- </ul>
- </div>
- <!--end of the menu-->
- <!--arrows nav-->
- <a href="#1" title="Page precédente" class="flscroll" id="flscrollg"> </a>
- <a href="#1" title="Page suivante" class="flscroll" id="flscrolld"> </a>
- <!--end arrows-->
- <div id="wrap">
-
- <div id="slide">
- <div id="home" class="panel item1">
- <div class="inner inner1"></div>
- </div>
- </div>
- <div id="slide">
- <div id="newsletter" class="panel item2">
- <div class="inner inner2"></div>
- <div class="inner-lev1 inner2a"></div>
- <div class="inner-lev2 inner2b"></div>
- </div>
- </div>
- </div>
Regards,Jarod.