Home/ Questions/Q 4328196
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T09:38:54+00:00

this is a carousel slider I am building. So far one thing is not

  • 0

this is a carousel slider I am building. So far one thing is not working right. If I use the goTo() function to skip ahead to a certain slide, the right() function stops working. The left() function and goTo() still works. My testing has revealed that the last part of goTo() is causing the problem. I set the goTo() parameter equal to the currslide variable. I dont know why that would be a problem though.

thanks for your helping

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js" language="javascript"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" language="javascript"></script>



<style type="text/css">

.arrow{margin:4px 0px 4px 4px; float:left; width:13px; height:13px;}
#larrow { background:url(larrow.gif) no-repeat}
#rarrow { background:url(rarrow.gif) no-repeat}

#larrow:hover {background-position:0 -13px; cursor:pointer}
#rarrow:hover {background-position:0 -13px; cursor:pointer}

/* portfolio slider styles */
#portslider {position:relative; width:960px; background:url(../assets/slide_images/loading.gif) no-repeat 50% 50%; margin:0 auto}


#portcontainer {position:relative; width:960px; height:370px; overflow:hidden; margin:0 auto}

.portimg {
    position: absolute;
    top:0px; 
    left:0px;
    width:960px;
    height:370px;
    display:none;
}

#captions {margin-top:10px; height: 22px; width:960px; background-color:#d5d5d5; position:relative}
#captions ul li {list-style:none; float:left; margin:4px 0px 4px 4px; cursor:pointer }
</style>


<script type="text/javascript">

$(window).load( function () {

 $('#portslider').css({'background': 'none'});                        
 $('.portimg').last().fadeIn(1000);

});

var currslide = 1;

function right() {

  var next = currslide+1;

  if( $('#portimg'+next).length) {  

  currslide ++;
  var last = currslide - 1;

  $('#portimg'+last).stop(true,true).animate({ 'left':'-=960px' }, {duration: 600, easing: 'easeOutCubic'});
  $('#portimg'+currslide).css({'left':'960px'}).appendTo('#portcontainer').show().stop(true,true).animate({ 'left':'-=960px' }, {duration: 600, easing: 'easeOutCubic'});

}

};

function left() {

  var next = currslide-1;

  if( $('#portimg'+next).length) {

  currslide --;
  var last = currslide + 1;

  $('#portimg'+last).stop(true,true).animate({ 'left':'+=960px' }, {duration: 600, easing: 'easeOutCubic'});
  $('#portimg'+currslide).css({'left':'-960px'}).appendTo('#portcontainer').show().stop(true,true).animate({ 'left':'+=960px' }, {duration: 600, easing: 'easeOutCubic'});

}

};

function goTo(n) {
    var g=n - currslide; //g represents how many slides are between destination slide and current slide 
    var l=960*g; //l represents how many pixels slide n must slide
    if (currslide != n) {
    $('#portimg'+currslide).stop(true,true).animate({ 'left':-l+'px' }, {duration: 600, easing: 'easeOutCubic'});
    $('#portimg'+n).css({ 'left': l+'px' }).appendTo('#portcontainer').show().stop(true,true).animate({ 'left':'0' }, {duration: 600, easing: 'easeOutCubic'});

    currslide = n;


    }


};



</script>


</head>

<body>
<div id="portslider">

<div id="portcontainer">
<img id="portimg2" class="portimg" src="test-port2.jpg" />
<img id="portimg3" class="portimg" src="test-port3.jpg" />
<img id="portimg4" class="portimg" src="test-port4.jpg" />
<img id="portimg5" class="portimg" src="test-port5.jpg" />
<img id="portimg1" class="portimg" src="test-port1.jpg" />
</div>


<div id="captions"> 
<div id="larrow" class="arrow" onclick="left()" /></div>  
<div id="rarrow" class="arrow" onclick="right()" /></div>
<ul>
<li onclick="goTo('1')">1</li>
<li onclick="goTo('2')">2</li>
<li onclick="goTo('3')">3</li>
<li onclick="goTo('4')">4</li>
<li onclick="goTo('5')">5</li>

</ul>
</div>

</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are passing arguments to goTo as strings, via the onclick events. When goto(‘1’) gets called, you set currslide = ‘1’. Since + is both concatenation and addition, when you call right(), if currslide is ‘3’, then currslide = currslide + 1 becomes ’31’, instead of 4. So left() still works, as the minus sign is not overloaded javascript casts it back to an int for you.

    Change

    <li onclick="goTo('1')">1</li>
<li onclick="goTo('2')">2</li>
...

    to

    <li onclick="goTo(1)">1</li>  <!-- no ' around the 1 -->
<li onclick="goTo(2)">2</li>
...

    As a friendly ps, I might suggest some gentle refactoring, maybe at least using right() and left() as wrappers for goTo instead of copy pasting that logic. Let me know if you have any questions, cheers!

    • 0