Content Slider Help

JavaScript
1

Hello Everyone.

I have created a “working” content slider with jQuery by following the following tutorial.

However, since my slider is a little different, I have removed some bits of code, and that of course has created some unusual behaviour in my content slider.

The content slides fine, however it keeps on sliding ! it doesn’t stop when there are no more slides.

Can someone please help me write this function in proper jQuery code.

function  manageSlides (position){
  // position==0 is first slide
  if(position==0)  {
  // and $('#leftControl') is clicked > move to position numberOfSlides-1
  }
  else { 
  // do nothing .. it will work as it should
  }
  
  // numberOfSlides-1 is last slides
  if(position==numberOfSlides-1) {
  and $('#rightControl') is clicked > move to position==0
  }
  else { do nothing .. it should work as before }
}

I would greatly appreciate any help.

Thank You.

2

it’s not clear to me exactly how you want the slide show to function after you made your changes to the jquery code.

if it’s any help, this is a plain vanilla javascript div slider you can use as a slideshow.

perhaps you can tweak it to do what you want or post back with more details of how you want the sldieshow to function.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
#main { 
overflow: hidden; 
border: 1px solid black; 
color: black; 
text-align: center; 
position: absolute; top: 30px; left: 50px; 
background-color: white; 
width: 200px; 
height: 200px} 
#div0 {   
position: absolute; top: 300px; left: 10px; 
color: white; 
background-color: black; 
width: 200px; 
height: 200px} 
#div1 {   
position: absolute; top: 300px; left: 300px; 
background-color: green; 
width: 200px; 
height: 200px} 
#div2 {    
position: absolute; top: 50px; left: 300px; 
background-color: red; 
width: 200px; 
height: 200px} 
#div3 {    
position: absolute; top: 300px; left: 600px; 
background-color: blue; 
width: 200px; 
height: 200px} 
#btnContainer { 
position: absolute; top: 250px; left: 10px} 
--> 
</style> 
<script type="text/javascript"> 

var curDiv = 0; 
var divSlide; 
var divId; 
var curLeft = -200; 
var zedIndex = 0; 
var pauser; 
 
function swapDiv(dir) {
    divId = "div"+curDiv; 
    zedIndex = zedIndex + 100; 
    curLeft = curLeft * dir;
    document.getElementById(divId).style.top = 0+"px"; 
    divSlide = setInterval(function() {slideDiv(dir)},30); 
} 
 
function slideDiv(dir) {   
    document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through 
    curLeft = curLeft + (1*dir);  
    if(dir == 1 && curLeft > 0)   {  //we have scrolled all the way to the right 
     clearInterval(divSlide); 
     clearTimeout(pauser); 
     curDiv = curDiv + 1; 
     if(curDiv > 3) curDiv = 0; 
     curLeft = -200 * dir; 
     pauser = setTimeout(function() {swapDiv(dir)},2000);
    } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
      clearInterval(divSlide); 
      clearTimeout(pauser); 
      curDiv = curDiv + 1; 
      if(curDiv > 3) curDiv = 0; 
      curLeft = 200 * dir; 
      pauser = setTimeout(function() {swapDiv(dir)},2000);
    } else {  //keep scrolling to the right 
        document.getElementById(divId).style.left = curLeft+"px";   
    } 
}
 
function stopSliding(btn) {
    if(btn == "stop") {
        document.getElementById("l2r").disabled = false;
        document.getElementById("r2l").disabled = false;
        curLeft = -200;
    } else {  
        document.getElementById("l2r").disabled = true;
        document.getElementById("r2l").disabled = true;
    }
    clearInterval(divSlide); 
    clearTimeout(pauser);
}     
</script> 
</head> 
<body> 
 
<div id="main"> 
    <div id="div0">This is Div 1</div> 
    <div id="div1">This is Div 2</div> 
    <div id="div2">This is Div 3</div> 
    <div id="div3">This is Div 4</div> 
</div> 
 
<div id="btnContainer"> 
    <button id="l2r" onclick="stopSliding(this.id);swapDiv(1);">Slide Left 2 Right</button>
    <button onclick="stopSliding('stop');">Stop Sliding</button>
    <button id="r2l" onclick="stopSliding(this.id);swapDiv(-1);">Slide Right 2 left</button> 
</div> 
 
</body> 
</html>
3

Hi Kalon

I wasn’t planning on buying a windows host this early, but it is so hard to explain things when people can’t see what you actually mean :smiley:

So I went and bought it, Uploaded my site aaaand here it is.

Now that you can see the issue, can you please help create the function.

Thank You.

4

there are plenty of free web host providers, but that is beside the point.

When I get to your home page it’s not obvious how you want the content to slide or what I have to click to make it slide.

can you give more specific instructions on how your content is to slide.

5

To slide content you simply click the [ Next ] or [ Prev ] buttons.

That slides the content fine, but the issues is it keeps on sliding and I want to stop that with some function.

If it reaches the end slide I want it to go back to the first slide when Next is clicked. :frowning:

6

ok, I’ve “butchered” the demo code I posted earlier so that that the original buttons now act as next and prev buttons to slide the content left or right 1 div at a time.

the demo is hard coded for 4 sliding divs. you can tweak it to make it dynamic so that the script counts how may sliding divs there are and then adjusts the max and min values for currDiv accordingly.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
#main { 
overflow: hidden; 
border: 1px solid black; 
color: black; 
text-align: center; 
position: absolute; top: 30px; left: 50px; 
background-color: white; 
width: 200px; 
height: 200px} 
#div0 {   
position: absolute; top: 300px; left: 10px; 
color: white; 
background-color: black; 
width: 200px; 
height: 200px} 
#div1 {   
position: absolute; top: 300px; left: 300px; 
background-color: green; 
width: 200px; 
height: 200px} 
#div2 {    
position: absolute; top: 50px; left: 300px; 
background-color: red; 
width: 200px; 
height: 200px} 
#div3 {    
position: absolute; top: 300px; left: 600px; 
background-color: blue; 
width: 200px; 
height: 200px} 
#btnContainer { 
position: absolute; top: 250px; left: 10px} 
--> 
</style> 
<script type="text/javascript"> 
var curDiv = -1; 
var divSlide; 
var divId; 
var curLeft = -200; 
var zedIndex = 0; 
var pauser; 
 
function swapDiv(dir) {
    curDiv = curDiv + dir;
    if(curDiv > 3) {curDiv = 0};
    if(curDiv < 0) {curDiv = 3};
    divId = "div"+curDiv; 
    zedIndex = zedIndex + 100; 
    curLeft = curLeft * dir;
    document.getElementById(divId).style.top = 0+"px"; 
    divSlide = setInterval(function() {slideDiv(dir)},30); 
} 
 
function slideDiv(dir) {   
    document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through 
    curLeft = curLeft + (1*dir);  
    if(dir == 1 && curLeft > 0)   {  //we have scrolled all the way to the right 
     clearInterval(divSlide); 
     if(curDiv > 3) curDiv = 0; 
     curLeft = -200 * dir; 
    } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
      clearInterval(divSlide); 
      if(curDiv < 0) curDiv = 3; 
      curLeft = 200 * dir; 
    } else {  //keep scrolling to the right 
        document.getElementById(divId).style.left = curLeft+"px";   
    } 
}
 
function stopSliding(btn) {
        curLeft = -200;
}     
</script> 
</head> 
<body> 
 
<div id="main"> 
    <div id="div0">This is Div 1</div> 
    <div id="div1">This is Div 2</div> 
    <div id="div2">This is Div 3</div> 
    <div id="div3">This is Div 4</div> 
</div> 
 
<div id="btnContainer"> 
    <button id="l2r" onclick="stopSliding(this.id);swapDiv(1);">Next</button>
    <button id="r2l" onclick="stopSliding(this.id);swapDiv(-1);">Previous</button> 
</div> 
 
</body> 
</html>