Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts

    How to approach this slider effect

    Good morning,

    I want to make a slider effect on the home page of one of my websites but not sure how to exactly set the content.

    I have attached a screenshot to this thread to help you understand what I need.

    It's basically some text, a 'read more' button and an image to change when either the left/right arrows are clicked, or the circular buttons within underneath the text.

    I've currently got all the 'containers' for these different contents hardcoded with their default display style set to none, then using jQuery to load in the first one by default.

    I'm not sure how to achieve the sliding effect from left to right or right to left.

    Anyone done a similar thing themselves and can advise on the best way to set it up? Should I just have one main box holding the content and pull image, text and href from an array for example?

    Can anyone point me to any tutorials?

    Are there any plugins you would recommend?

    Thank you for your time.

    Kind regards,

    LC.
    Attached Thumbnails Attached Thumbnails How to approach this slider effect-slider.jpg  
    Last edited by LearningCoder; 12-15-2013 at 03:14 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    google JQUERY Slider should give you a wide choise

    or without JQUERY

    Code:
    <!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[*/
    
    #Slider {
      position:relative;width:420px;height:220px;border:solid red 1px;background-Color:#FFCC66;
    }
    
    .panel {
      width:400px;height:200px;background-Color:#FFFFCC;
    }
    
    .panel2 {
      background-Color:#CCFFFF;
    }
    
    .panel3 {
      background-Color:#CCFF66;
    }
    
    .forward {
      position:absolute;z-Index:10;left:5px;top:90px;width:20px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .back {
      position:absolute;z-Index:10;left:395px;top:90px;width:20px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .paginate {
      position:absolute;z-Index:10;left:175px;top:220px;width:50px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .paginate .page {
      position:relative;left:5px;top:5px;width:10px;height:10px;margin-Right:5px;float:left;background-Color:#FFCC66;
    }
    
    .paginate .current {
      background-Color:#FF0000;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="Slider" >
      <div class="panel" >Panel 1</div>
      <div class="panel panel2" >Panel 2</div>
      <div class="panel panel3" >Panel 3</div>
      <div class="forward" >&lt;</div>
      <div class="back" >&gt;</div>
      <div class="paginate" ></div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slider (15-December-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcSlider={
    
     GoTo:function(id,n){  // the parent DIV id, the index number to goto
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.ud);
       if (o.ary[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Next:function(id,ud){  // the parent DIV id, 1 = forward or -1 = back
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){  // the parent DIV id, the delay
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id){  // the parent DIV id
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,m=o.Mode,ud=o.Direction,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
      if (p){
       var m=typeof(m)=='string'&&m.charAt(0).toUpperCase=='V'?['top','offsetHeight']:['left','offsetWidth'],clds=p.childNodes,s=document.createElement('DIV'),w,h,sp,el,z0=0;
       o.ary=this.bycls(p,o.PanelClass);
       if (o.ary[1]){
        s.style.position='absolute';
        s.style.left=s.style.top='0px';
        sp=s.cloneNode(false);
        sp.style.overflow='hidden';
        el=this.bycls(p,o.PaginateClass)[0];
        o.pge=[];
        w=o.ary[0].offsetWidth;
        h=o.ary[0].offsetHeight;
        for (;z0<o.ary.length;z0++){
         o.ary[z0].style.position='absolute';
         o.ary[z0].style.left=o.ary[z0].style.top='0px';
         sp.style.width=o.ary[z0].style.width=w+'px';
         sp.style.height=o.ary[z0].style.height=h+'px';
         p.removeChild(o.ary[z0]);
         o.pge[z0]=document.createElement('DIV');
         if (el){
          o.pge[z0].className='page'+(z0>0?'':' current');
          this.addevt(o.pge[z0],'mouseup','GoTo',id,z0);
          el.appendChild(o.pge[z0]);
         }
        }
        s.appendChild(o.ary[0]);
        sp.appendChild(s);
        p.appendChild(sp);
        el=this.bycls(p,'forward')[0];
        el?this.addevt(el,'mouseup','Next',id,1):null;
        el=this.bycls(p,'back')[0];
        el?this.addevt(el,'mouseup','Next',id,-1):null;
        if (o.MouseoverAuto===true){
         this.addevt(p,'mouseover','Pause',id);
         this.addevt(p,'mouseout','Auto',id);
        }
        sp.style.left=(p.offsetWidth-o.ary[0].offsetWidth)/2+'px';
        sp.style.top=(p.offsetHeight-o.ary[0].offsetHeight)/2+'px';
        o.id=id;
        o.s=[s,m[0],o.ary[0],o.ary[0],0];
        o.sz=o.ary[0].offsetWidth;
        o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
        o.hold=typeof(hold)=='number'&&hold>20?hold:o.ms*4;
        o.lgth=z0-1;
        o.sz=o.ary[0][m[1]];
        o.ud=typeof(ud)=='number'&&ud<0?-1:1;
        o.n=0;
        this['zxc'+id]=o;
        typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
       }
      }
     },
    
     bycls:function(p,c){
      for (var es=p.getElementsByTagName('*'),a=[],z0=0;z0<es.length;z0++){
       if ((' '+es[z0].className+' ').match(' '+c+' ')){
        a.push(es[z0]);
       }
      }
      return a;
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a;
      n=n>o.lgth?0:n<0?o.lgth:n;
      o.s[3]=o.ary[n];
      o.s[2].style[o.s[1]]='0px';
      o.s[3].style[o.s[1]]=o.sz*(o.ud>0?1:-1)+'px';
      o.s[0].appendChild(o.s[3]);
      this.animate(o,o.s,0,o.sz*(o.ud>0?-1:1),new Date(),o.ms);
      o.pge[o.n].className='page';
      o.pge[n].className='page current';
      o.n=n;
     },
    
     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[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[0].replaceChild(a[3],a[2]);
       a[2]=a[3];
       a[2].style[a[1]]=a[0].style[a[1]]=0+'px';
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcSlider.init({
     ParentID:'Slider',       // the unique ID name of the Parent DIV.                                (string)
     PanelClass:'panel',      // the common class name of the panels to slide.                        (string)
     Mode:'Horizontal',       //(optional) the mode of execution, 'Horizontal' or 'Vertical'.         (string, default = 'Horizontal')
     Animate:1000,            //(optional) the slide duration in millisec.                            (string, default = 1000)
     AutoHold:2000,           //(optional) the auto rotation 'Hold' delay in millisec.                (string, default = Animate*4)
     AutoStart:3000,          //(optional) the auto rotation start delay in millisec.                 (string, default = no auto start)
     MouseoverAuto:true,      //(optional) true = add mouseover Pause and mouseout start Auto rotate. (boolean, default = false = inline event calls)
     PaginateClass:'paginate' //(optional) the unique ID name of the pagination parent DIV.           (string, default = no pagination)
    });
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    LearningCoder (12-16-2013)

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Good morning vwphillips!

    That's really helped me, thank you very much. I've decided to go for the code you wrote as it was very similar to what I needed and I've got it working with my own content etc now after making a couple of adjustments to my own code.

    I am wondering, how would I go about not making it auto slide? I want it to be all manual (so the user has to actually click the left and right buttons).

    Is this possible?

    When I added 'no auto start' to the AutoStart initializer, it broke the CSS and the panels appeared underneath one another.

    Thanks so much again.

    Kind regards,

    LC.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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[*/
    
    #Slider {
      position:relative;width:420px;height:220px;border:solid red 1px;background-Color:#FFCC66;
    }
    
    .panel {
      width:400px;height:200px;background-Color:#FFFFCC;
    }
    
    .panel2 {
      background-Color:#CCFFFF;
    }
    
    .panel3 {
      background-Color:#CCFF66;
    }
    
    .forward {
      position:absolute;z-Index:10;left:5px;top:90px;width:20px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .back {
      position:absolute;z-Index:10;left:395px;top:90px;width:20px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .paginate {
      position:absolute;z-Index:10;left:175px;top:220px;width:50px;height:20px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    .paginate .page {
      position:relative;left:5px;top:5px;width:10px;height:10px;margin-Right:5px;float:left;background-Color:#FFCC66;
    }
    
    .paginate .current {
      background-Color:#FF0000;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Auto" onmouseup="zxcSlider.Auto('Slider');" />
    <input type="button" name="" value="Pause" onmouseup="zxcSlider.Pause('Slider');" />
     <div id="Slider" >
      <div class="panel" >Panel 1</div>
      <div class="panel panel2" >Panel 2</div>
      <div class="panel panel3" >Panel 3</div>
      <div class="forward" >&lt;</div>
      <div class="back" >&gt;</div>
      <div class="paginate" ></div>
     </div>
    <input type="button" name="" value="Auto" id="ba" />
    <input type="button" name="" value="Pause"id="bp" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slider (15-December-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcSlider={
    
     GoTo:function(id,n){  // the parent DIV id, the index number to goto
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.ud);
       if (o.ary[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Next:function(id,ud){  // the parent DIV id, 1 = forward or -1 = back
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     Auto:function(id,ms){  // the parent DIV id, the delay
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id){  // the parent DIV id
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ParentID,m=o.Mode,ud=o.Direction,add=o.AddEvents,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
      if (p){
       var m=typeof(m)=='string'&&m.charAt(0).toUpperCase=='V'?['top','offsetHeight']:['left','offsetWidth'],clds=p.childNodes,s=document.createElement('DIV'),w,h,sp,el,a,z0=0,z1=0;
       o.ary=this.bycls(p,o.PanelClass);
       if (o.ary[1]){
        s.style.position='absolute';
        s.style.left=s.style.top='0px';
        sp=s.cloneNode(false);
        sp.style.overflow='hidden';
        el=this.bycls(p,o.PaginateClass)[0];
        o.pge=[];
        w=o.ary[0].offsetWidth;
        h=o.ary[0].offsetHeight;
        for (;z0<o.ary.length;z0++){
         o.ary[z0].style.position='absolute';
         o.ary[z0].style.left=o.ary[z0].style.top='0px';
         sp.style.width=o.ary[z0].style.width=w+'px';
         sp.style.height=o.ary[z0].style.height=h+'px';
         p.removeChild(o.ary[z0]);
         o.pge[z0]=document.createElement('DIV');
         if (el){
          o.pge[z0].className='page'+(z0>0?'':' current');
          this.addevt(o.pge[z0],'mouseup','GoTo',id,z0);
          el.appendChild(o.pge[z0]);
         }
        }
        s.appendChild(o.ary[0]);
        sp.appendChild(s);
        p.appendChild(sp);
        el=this.bycls(p,'forward')[0];
        el?this.addevt(el,'mouseup','Next',id,1):null;
        el=this.bycls(p,'back')[0];
        el?this.addevt(el,'mouseup','Next',id,-1):null;
        if (o.MouseoverAuto===true){
         this.addevt(p,'mouseover','Pause',id);
         this.addevt(p,'mouseout','Auto',id);
        }
        sp.style.left=(p.offsetWidth-o.ary[0].offsetWidth)/2+'px';
        sp.style.top=(p.offsetHeight-o.ary[0].offsetHeight)/2+'px';
        o.id=id;
        o.s=[s,m[0],o.ary[0],o.ary[0],0];
        o.sz=o.ary[0].offsetWidth;
        o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
        o.hold=typeof(hold)=='number'&&hold>20?hold:o.ms*4;
        o.lgth=z0-1;
        o.sz=o.ary[0][m[1]];
        o.ud=typeof(ud)=='number'&&ud<0?-1:1;
        o.n=0;
        if (add instanceof Array){
         for (;z1<add.length;z1++){
          if (add[z1]){
           p=document.getElementById(add[z1][0]);
           a=add[z1][1];
           p&&this[add[z1][2]]?this.addevt(p,a=='click'||a=='mouseover'||a=='mouseout'||a=='mousedown'||a=='mousemove'?a:'mouseup',add[z1][2],id,add[z1][3]):null;
          }
         }
        }
        this['zxc'+id]=o;
        typeof(srt)=='number'&&srt>20?this.Auto(id,srt):null;
       }
      }
     },
    
     bycls:function(p,c){
      for (var es=p.getElementsByTagName('*'),a=[],z0=0;z0<es.length;z0++){
       if ((' '+es[z0].className+' ').match(' '+c+' ')){
        a.push(es[z0]);
       }
      }
      return a;
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a;
      n=n>o.lgth?0:n<0?o.lgth:n;
      o.s[3]=o.ary[n];
      o.s[2].style[o.s[1]]='0px';
      o.s[3].style[o.s[1]]=o.sz*(o.ud>0?1:-1)+'px';
      o.s[0].appendChild(o.s[3]);
      this.animate(o,o.s,0,o.sz*(o.ud>0?-1:1),new Date(),o.ms);
      o.pge[o.n].className='page';
      o.pge[n].className='page current';
      o.n=n;
     },
    
     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[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[0].replaceChild(a[3],a[2]);
       a[2]=a[3];
       a[2].style[a[1]]=a[0].style[a[1]]=0+'px';
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcSlider.init({
     ParentID:'Slider',       // the unique ID name of the Parent DIV.                                (string)
     PanelClass:'panel',      // the common class name of the panels to slide.                        (string)
     Mode:'Horizontal',       //(optional) the mode of execution, 'Horizontal' or 'Vertical'.         (string, default = 'Horizontal')
     Animate:1000,            //(optional) the slide duration in millisec.                            (string, default = 1000)
     AutoHold:2000,           //(optional) the auto rotation 'Hold' delay in millisec.                (string, default = Animate*4)
    // AutoStart:3000,          //(optional) the auto rotation start delay in millisec.                 (string, default = no auto start)
    // MouseoverAuto:true,      //(optional) true = add mouseover Pause and mouseout start Auto rotate. (boolean, default = false = inline event calls)
     PaginateClass:'paginate', //(optional) the unique ID name of the pagination parent DIV.           (string, default = no pagination)
     AddEvents:[               //(optional) an array defning the event calls to add to page elements.  (array, default = in line event calls)
       // field 0 = the unique ID name of the element.
       // field 1 = the event type.
       // field 2 = the script function to call.
       // field 3 = the paameter to pass to the function.
       ['bp','click','Pause'],
       ['ba','click','Auto']
      ]
    });
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •