Alter Carousel Script for Next Previous


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 6 of 6

Thread: Alter Carousel Script for Next Previous

Hybrid View

  1. #1
    Join Date
    Feb 2007
    Posts
    79

    Alter Carousel Script for Next Previous

    I'm trying to slightly alter the script found here, http://www.adrianhodge.com/web-desig...iv-slider-121/.

    What i want to do is make the carousel work on a Next/Previous feature versus a 1, 2, 3 method. I tried to do it myself but found i was was just going in circles and nothing was working. Any help is appreciated. I have listed below the only parts that should matter.

    Javascript
    Code:
    <script language="Javascript">
    <!--
    function slideFolio(col){
    	var x = ((col-1)*-505)
    	var folioChange = new Fx.Tween('folio', {duration:2000});
    	folioChange.start('left',x);
    	var cur = "trigger"+col;
    	$(cur).addClass('current');
    
    	for (i=1;i<=8;i++){
    		var loopLI = "trigger"+i;
    		if (cur==loopLI){}else{
    			$(loopLI).removeClass('current');
    		}
    	}
    }
    //-->
    </script>
    HTML
    Code:
    <ul class="nums">
    <li id="trigger1" class="current"><a href="javascript:slideFolio(1);" class="liinternal">1</a></li>
    <li id="trigger2"><a href="javascript:slideFolio(2);" class="liinternal">2</a></li>
    <li id="trigger3"><a href="javascript:slideFolio(3);" class="liinternal">3</a></li>
    </ul>

  2. #2
    Join Date
    Feb 2007
    Posts
    79
    Solution:

    JavaScript
    Code:
    <script language="Javascript">
    <!--
    var col=1; // always 1
    var colMin=1; // always 1
    var colMax=7; // max columns
    
    function slideFolio(direction){
    
        if (direction=='p' && col > 0) { col = col - 1; }
        if (direction=='n') { col = col + 1; }
    
        if (col > colMax) { col = colMin; }
        else if (col < colMin) { col = colMax; }
    
        var x = ((col-1)*-505);
        var folioChange = new Fx.Tween('folio', {duration:2000});
        folioChange.start('left',x);
    }
    //-->
    </script>
    HTML
    Code:
    <a href="javascript:slideFolio('p');">Previous</a></li>
    <a href="javascript:slideFolio('n');">Next</a></li>

  3. #3
    Join Date
    Apr 2007
    Location
    Sterling Heights, Michigan
    Posts
    8,666
    Cool! Thanks for coming back and posting your solution.
    I don't answer coding questions via PM or Email. Please post a thread in the appropriate forum section.
    Please use [Code]your code goes in here[/Code] tags when posting code.
    Before posting your question, did you look here?
    Got a question on Linux? Visit our Linux sister site.
    Modifications Required For VB6 Apps To Work On Vista

  4. #4
    Join Date
    Feb 2007
    Posts
    79
    always!

  5. #5
    Join Date
    Dec 2013
    Posts
    24
    Sounds a little complicated on the implementation. Is there any convenient UI carousel control?

  6. #6
    Join Date
    May 2014
    Location
    Warsaw/Poland
    Posts
    3
    makaveiljojo,

    There are plenty of UI solutions for carousel control. My favourite is the Metro UI.

Similar Threads

  1. Replies: 2
    Last Post: 08-23-2005, 03:19 PM
  2. Ann: Alintex Script Host Beta (0.97) Released
    By Alintex in forum vb.announcements
    Replies: 0
    Last Post: 12-16-2002, 03:30 AM
  3. Ann: Alintex Script Host Beta (0.97) Released
    By Alintex in forum dotnet.announcements
    Replies: 0
    Last Post: 12-16-2002, 03:30 AM
  4. Replies: 3
    Last Post: 08-20-2002, 01:14 AM
  5. shared script is not working in Workflow Designer
    By Lakshmeenarayana G G in forum Enterprise
    Replies: 0
    Last Post: 02-05-2002, 09:43 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center