Having issue with slider navigation. Works perfectly fine when there are no other unordered lists of links on the page; unfortunately, if any other unordered lists of links appear on the page, the slider functions properly until the slider navigation buttons are used, in which case, the slide disappears and fails to load the next slide.
Can anyone find a quick solution? Code below:
Fun Stuff:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.slider {
height: 320px;
position: relative;
}
.slider .slide {
display: none;
background: red;
position: absolute;
height: 320px;
width: 100%;
text-align: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.slider .slide:first').addClass('active').fadeIn(200);
function rotate(index) {
$('.slider .slide.active').removeClass('active').fadeOut(200, function() {
$('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
});
}
$('.slider-nav li a').click(function() {
var index = $(this).parent().index('li');
rotate(index);
return false;
});
setInterval(function() {
var $next = $('.slider .slide.active').next();
if ($next.length == 0)
$next = $('.slider .slide:first');
rotate($next.index());
}, 2000);
});
</script>
</head>
<body>
<ul>
<li><a href="#">Conflicting List Item</a></li>
<li><a href="#">Conflicting List Item</a></li>
<li><a href="#">Conflicting List Item</a></li>
<li><a href="#">Conflicting List Item</a></li>
</ul>
<div class="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<ul class="slider-nav">
<li><a href="#">Nav Slide 1</a></li>
<li><a href="#">Nav Slide 2</a></li>
<li><a href="#">Nav Slide 3</a></li>
<li><a href="#">Nav Slide 4</a></li>
</ul>
</body>
</html>
Edit: Now with code!
Simple as that: change
var index = $(this).parent().index('li');tovar index = $(this).parent().index();