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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html & javascript carousel

    I'm trying to make a carousel which displays different content, text and an image, with 3 different "panes".

    what I have works fine when cycling right through the panes, however when trying to reverse through the sliding animation plays, but the previous pane is not there, then it pops into view.

    any help would be greatly appreciated here is my code:

    javascript:
    Code:
    <script type="text/javascript">
    	function carouselAdvanceFunction()
    	{
    		$(document).ready(function(){
    			$("#carousel ul").each(function(){
    				$("#carousel ul").animate({marginLeft:-930},1000,function(){
    						
    					//after the anim completes
    					$(this).find("li:last").after($(this).find("li:first"));
    					$(this).css({marginLeft:0});	
    					$(this).stop();
    				})
    			});
    		});
    	}
    			
    	function carouselBackUpFunction()
    	{
    		$(document).ready(function(){
    			$("#carousel ul").each(function(){
    				$("#carousel ul").animate({marginLeft:+930},1000,function(){
    
    					//after the anim completes
    					$(this).find("li:last").after($(this).find("li:first"));
    					$(this).css({marginLeft:-930});	
    					$(this).stop();
    				})
    			});
    		});		
    	}
    </script>
    and where i'm calling the functions in HTML:
    Code:
    	<div id="carouselScroll">
    		<div id="carouselNavLeft">
    			<button class="carouselBtnDisabled" onclick="carouselBackUpFunction()"></button>
    		</div>
    				
    		<div id="carouselNavRight">
    			<button class="carouselBtn" onclick="carouselAdvanceFunction()"></button>
    		</div>
    	</div>

  • #2
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On another issue i'm having with the same carousel.

    I want to enlarge my div area for the third pane in the carousel. What is the best way to get and identify which is the current pane?

    I have tried a few methods but no success yet. this is what I currently have:

    javascript:
    Code:
    if($("#carousel ul li").id == "3")
    {
    	//enlarge carousel area
    	$("#carousel").animate({height:320},1000);
    	$("#carousel").animate({top:411},1000);
    	$("#dropShadow").animate({top:731},1000);
    }
    html:
    Code:
    <li id="3">
    	<img src="images/carousel_3.png" align="left" />
    	<p>
    		<f4>Complete</f4>
    		<p>
    			<f5>Complete and submit timely and high-quality reviews.</f5>
    		</p>
    		<p>
    			<f5>By doing these things, you will enable AHRC to continue supporting the best research</f5>
    		</p>
    		<div id = "moveOn">
    			<button class="purpleBtn">
    			<f6>Move on to find out what's coming up in each unit</f6>
    			</button>
    		</div>											
    		</p>
    	</li>
    </ul>
    I have use the same
    Code:
    <li id="n">  </li>
    for each pane in the list.


  •  

    Posting Permissions

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