One button slider

Im building a folio site and i was wondering how would i get a slider that only uses one button, which when clicked the slider slides through a list of images and loops back to the start image when the end image is reached?

Hi there,

Welcome to the forums :slight_smile:

The easiest way to add an image slider to a web page (especially if you don’t have much experience with JS) is to use a plugin.
Here’s a recent list of good ones (including demos).
I would look for one that does what you want and use that.

If you need any help with the implementation, or really, absolutely, definitely need one that only has one button, then let us know and I’m sure we’ll be able to help.

Thank you for your reply, I would like to definitely have one button controlling the slider as its apart of the design of my folio site.

here is the link http://jpcallandesigns.com/

I want to be able to click the light globe and then have the slider move to next image on each click until the last image then have it go back to the start image

You could adapt bxSlider to do that by manipulating the CSS. It’s my favorite slider.

Yeah, bxSlider seems a good choice.
Why don’t you implement that and let us know how you get on.

ill give the bx slider ago and ill let you guys know cheers

would it be possible to link one button to different sections using different id’s?

Sorry, I’m not really sure what you mean.
The best thing would be to implement the bxSlider with a few slides on the page you linked to, then we have some code to go on.

so like:

<section id=“one”> Page 1 </section>

<section id=“two”> Page 2 </section>

<section id=“three”> Page 3 </section>

<section id=“four” > Page 4 </section>

then link a button to loop through these four sections

Sorry, I’m still not really sure what you are aiming at.

The code is fine, but this sentence doesn’t really make much sense for me.

yeah im not sure of an easy way of explaining it, i just want to be able to click through different sections of the site using only one button, i think i may have to think of something else in terms of navigation

Well, if you just go ahead and add the bxSlider (with a few slides) to the page you linked to, that’ll give us more to go on.
I’m sure it won’t be too difficult to set it up as you require.

bxSlider, by default, has left/right buttons for scrolling the images right or left. My suggestion would be to keep only the right pointing button, but move it over far left, and style it to include the light bulb image. All that is easy with CSS, and you’d get the effect you were mentioning initially.

Here is the link with slider on the page, i want the light globe button on the left to be the slider button, thanks for your help

http://www.jpcallandesigns.com/

OK, see my post above yours (#13). I would style this button to include the lightbulb image and move it to the left:

<a class="bx-next" href="">Next</a>

As an example, I added in these styles to your page as an experiment:

.bx-wrapper .bx-next {
left: -350px !important;
top: 0 !important;
width: 260px !important; 
height: 666px !important;
background: url(http://www.jpcallandesigns.com/light%20globe.png) no-repeat 0 0 !important;
}

.globe {
display: none;
}

I had to use !important to override your other styles, but you wouldn’t need them in the end.

cool thanks so much its working all i have to do now is get my hover affect working again i take it ill have to change it to .bx-next:hover ?

in principle

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
  position:absolute;overflow:hidden;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
}

#tst IMG {
  width:400px;height:300px;float:left;
}

.slide {
  position:absolute;left:0px;top:0px;width:4000px;height:300px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Next" onmouseup="zxcMultiSlider.Next('tst',1);"/>
<input type="button" name="" value="Back" onmouseup="zxcMultiSlider.Next('tst',-1);"/>
<input type="button" name="" value="Auto" onmouseup="zxcMultiSlider.Auto('tst');"/>
<input type="button" name="" value="Pause" onmouseup="zxcMultiSlider.Pause('tst');"/>
<input type="button" name="" value="GoTo 0" onmouseup="zxcMultiSlider.GoTo('tst',0);"/>
<input type="button" name="" value="GoTo 1" onmouseup="zxcMultiSlider.GoTo('tst',1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="zxcMultiSlider.GoTo('tst',2);"/>
<input type="button" name="" value="SwapSlide 0" onmouseup="zxcMultiSlider.SwapSlide('tst',0);"/>
<input type="button" name="" value="SwapSlide 1" onmouseup="zxcMultiSlider.SwapSlide('tst',1);"/>

<div id="tst" >
 <div class="slide" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="image" />
 </div>
 <div class="slide" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="image" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="image" />
 </div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcMultiSlider={

 SwapSlide:function(id,n){
  var o=this['zxc'+id];
  if (o&&o.ary[n]){
   this.Pause(id);
   o.ary[o.n][0][0].style.visibility='hidden';
   o.n=n;
   o.ary[n][0][0].style.visibility='visible';
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   this.rotate(o,o.ary[o.n][1]+ud);
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o&&o.ary[o.n][2][n]){
   this.rotate(o,n);
  }
 },

 Auto:function(id,ms){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o,0,true); },ms||200);
  }
 },

 Pause:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var id=o.ParentID,ms=o.Animate,h=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id),clds=p.childNodes,ary=[],n=0,z0=0;
  for (;z0<clds.length;z0++){
   if (clds[z0].nodeType==1){
    clds[z0].style.visibility=ary.length!=n?'hidden':'visible';
    ary.push([[clds[z0],'left',0],0,clds[z0].getElementsByTagName('IMG')]);
   }
  }
  o.id=id;
  o.ary=ary;
  o.n=n;
  o.ud=1;
  o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
  o.h=typeof(h)=='number'&&h>0?h:o.ms*4;
  this['zxc'+id]=o;
  typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
 },

 rotate:function(o,n,au){
  this.Pause(o.id);
  var a=o.ary[o.n],lgth=a[2].length-1;
  o.auto=au===true;
  o.auto?n=a[1]+o.ud:null;
  n=n>lgth?0:n<0?lgth:n;
  a[1]=n;
  this.animate(o,a[0],a[0][2],-a[2][n].offsetLeft,new Date(),o.ms);
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[2]=Math.max(f<0||t<0?n:0,n);
   a[0].style[a[1]]=a[2]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[2]=t;
   a[0].style[a[1]]=t+'px';
   o.auto?oop.Auto(o.id,o.h):null;
  }
 }

}

zxcMultiSlider.init({
 ParentID:'tst',  // the unique Id name of the parent DIV.                     (string)
 Animate:1000,    //(optional) the animation duration in milli seconds.        (number, default = 1000)
 AutoHold:3000,   //(optional) the auto rotate 'hold' delay' in milli seconds. (number, default = 1000)
 AutoStart:1000   //(optional) the auto start delay' in milli seconds.         (number, default = no auto start)
});

/*]]>*/
</script></body>

</html>

Yes, that would work nicely. I would make a sprite image that includes the non-hover and hover states, and shift the background position on hover.