I’m building a simple jQuery image rotator script and I’m stuck on the last piece of it. I want to be able to click on the numbers at the top of the script to jump to a specific slide in the slide show. The click seems to be registering the correct slide number but the show is not doing what it is supposed to do.
Here is the code:
<script type="text/javascript">
jQuery(document).ready(function($) {
function reIndex () {
if (dir == 'prev') {
if (slide_curr == slide_min + 1) {
slide_prev = slide_max;
slide_curr = slide_min;
slide_next = slide_min + 1;
} else if (slide_curr == slide_min) {
slide_prev = slide_max - 1;
slide_curr = slide_max;
slide_next = slide_min;
} else {
slide_curr = slide_prev;
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
} else {
if (slide_curr == slide_max - 1) {
slide_prev = slide_max - 1;
slide_curr = slide_max;
slide_next = slide_min;
} else if (slide_curr == slide_max) {
slide_prev = slide_max;
slide_curr = slide_min;
slide_next = slide_min + 1;
} else {
slide_curr = slide_next;
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
}
}
function doTransition () {
// reset the z-index vals
$(slides).css('z-index','1');
$(slides[slide_curr]).css('z-index', '2');
// turn on the display of the next slide
if (dir == 'prev') {
$(slides[slide_prev]).css('display','block');
} else {
$(slides[slide_next]).css('display','block');
}
// fade the current slide out (to zero opacity)
$(slides[slide_curr]).fadeOut(900);
}
function printSelectors () {
var li_string = '';
var selector_class;
for (var i=0; i<=slide_max; i++) {
//display_num = i+1;
display_num = '';
if (slide_curr == i) {
selector_class = ' class="current"';
} else {selector_class = '';}
li_string = li_string + '<li id="slider_sel_'+i+'"'+selector_class+'>'+display_num+'</li>';
}
$('#bx_slider ul.slide-selectors').html(li_string);
// click number selector
$('#bx_slider ul.slide-selectors li').click(function() {
slide_curr = $(this).index();
clickSlide();
$('#bx_state2').html('clicked: '+$(this).index()); // just for debugging purposes
slideShow_play();
});
}
function reClassSelectors () {
$('#bx_slider ul.slide-selectors li').removeClass('current');
$('#slider_sel_'+slide_curr).addClass('current');
}
function clickSlide (clicked_slide_index) {
//slide_curr = clicked_slide_index;
if (slide_curr = slide_max) {
slide_prev = slide_curr - 1;
slide_next = slide_min;
} else if (slide_curr == slide_min) {
slide_prev = slide_max;
slide_next = slide_curr + 1;
} else {
slide_prev = slide_curr - 1;
slide_next = slide_curr + 1;
}
}
function slideShow_play () {
doTransition();
reIndex();
reClassSelectors();
printState();
if (is_paused != true) {
timeout = setTimeout(slideShow_play, interval);
}
}
function slideShow_start () {
$(slides[slide_curr]).css('display','block');
printSelectors();
timeout = setTimeout(slideShow_play, 3000);
}
// just for debugging purposes
function printState () {
var state_str = 'slide_prev='
+ slide_prev
+ '; slide_curr='
+ slide_curr
+ '; slide_next='
+ slide_next
+ '; slide_max='
+ slide_max
+ '; slide_min='
+ slide_min;
$('#bx_state').html(state_str);
}
// set hover
$('#bx_slider').hover(function() {
is_paused = true;
clearTimeout(timeout);
}, function() {
is_paused = false;
dir = 'next';
timeout = setTimeout(slideShow_play, interval);
});
// prev-next
$('#bx_slider .slide-btns').click(function() {
if ($(this).hasClass('prev')) {dir = 'prev';} else {dir = 'next';}
slideShow_play();
});
// variables, initialize the settings
var slides = $('#bx_slider .slide');
var interval = 4000;
var is_paused = false;
var dir = 'next';
var slide_min = 0;
var slide_max = slides.length - 1;
var slide_curr = 0;
var slide_prev = slide_max;
var slide_next = 1;
// start it all off when the page loads
slideShow_start();
});
</script>
<style type='text/css'>
#bx_slider {
width:922px; height:530px; margin:100px auto;
position:relative;}
/* slide frame */
#bx_slider .slide {
width:922px; height:530px;
display:none; position:absolute; z-index:1;}
/* slide image */
#bx_slider .slide-pic {
position:absolute; z-index:1;}
/* slide caption */
#bx_slider .slide-caption {
position:absolute; z-index:2; left:0; bottom:0;
background:url('caption-bg.png'); width:922px; height:60px;
font-size:14px; line-height:60px; color:#fff; text-align:center;}
/* buttons: prev or next */
#bx_slider .slide-btns {
position:absolute; z-index:2;
width:50%; height:100%; cursor:pointer;}
#bx_slider .slide-btns.prev {left:0; background:none;}
#bx_slider .slide-btns.next {right:0; background:none;}
#bx_slider .slide-btns.prev:hover {
background:url('btn-prev.png') no-repeat left center;}
#bx_slider .slide-btns.next:hover {
background:url('btn-next.png') no-repeat right center;}
/* selectors (numbers or radio buttons, etc) */
#bx_slider ul.slide-selectors {
margin:0; padding:0; list-style:none; height:20px; width:100%;
position:absolute; z-index:5; top:-60px; text-align:center;}
#bx_slider ul.slide-selectors li {
display:inline-block; margin:10px; padding:0;
width:41px; height:41px; cursor:pointer;}
#slider_sel_0 {background:url('selector-sprite.png') no-repeat 0 0;}
#slider_sel_0.current {background-position:0 -43px;}
#slider_sel_1 {background:url('selector-sprite.png') no-repeat -43px 0;}
#slider_sel_1.current {background-position:-43px -43px;}
#slider_sel_2 {background:url('selector-sprite.png') no-repeat -86px 0;}
#slider_sel_2.current {background-position:-86px -43px;}
#slider_sel_3 {background:url('selector-sprite.png') no-repeat -129px 0;}
#slider_sel_3.current {background-position:-129px -43px;}
#slider_sel_4 {background:url('selector-sprite.png') no-repeat -172px 0;}
#slider_sel_4.current {background-position:-172px -43px;}
</style>
<div id="bx_slider">
<div class='slide-btns prev'></div>
<div class='slide-btns next'></div>
<ul class='slide-selectors'></ul>
<div class='slide'>
<img src="slide1.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide one</div>
</div>
<div class='slide'>
<img src="slide2.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide two</div>
</div>
<div class='slide'>
<img src="slide3.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide three</div>
</div>
<div class='slide'>
<img src="slide4.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide four</div>
</div>
<div class='slide'>
<img src="slide5.jpg" class='slide-pic' />
<div class='slide-caption'>hello world, slide five</div>
</div>
</div><!-- #bx_slider -->
<div id='bx_state'></div>
<div id='bx_state2'></div>
Here is a link to the live code: http://www.exit44.com/slider/
Looks like you have a typo here:
You need to uncomment
slide_curr = clicked_slide_index;and you need to change(slide_curr = slide_max)to(slide_curr == slide_max)so that you are not overwriting the value ofslide_currwith the value ofslide_max.