SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    157
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Changing the duration of a slide in slideshow

    Hi,

    I have followed a youtbue tutorial on creating an automatic slideshow using javascript, this slideshow works perfectly on the web page www.neverup-neverin.com

    If someone could help me with the following I'd be very grateful:

    1. I want to keep each slide on the screen for a longer amount of time, say 7 seconds. I have tried editing the "3000" time frame in the js but it doesn't seem to make any changes?

    2. Want to be able to let the user flick left and right, I can't seem to see the arrows, or "previous" and "next" text to allow the user to do this.

    I would paste the javascript code and css code in here but it would clog up the page, still haven't worked out how to do that fancy thing where the code is displayed in a scrollbar window! Newbie to all this

    Thanks in advance

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    question 1:

    The "3000" is given in millisec., so it's 3 sec. - Tested: if you change it in 7000 or more, the slides will stay longer.

  3. #3
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    157
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have tried changing this, my code look likes so, and t still only stays on the screen for 3 seconds

    Code:
    // JavaScript Document
    
    sliderInt = 1;
    sliderNext = 2;
    
    $(document).ready(function(){
    	$('#slider>img#1').fadeIn(300);
    	startSlider();					   
    });
    
    function startSlider (){
    	
    	count = $("#slider > img").size();
    	
    	loop= setInterval(function(){
    							   
    							   if(sliderNext > count) {
    								   sliderNext=1;
    								   sliderInt=1;
    								   
    								   }
    							   
    		$("#slider>img").fadeOut(300);
    		$("#slider>img#" + sliderNext).fadeIn(300)
    		
    		sliderInt = sliderNext;
    		sliderNext = sliderNext + 1;
    							   
    							   
    		}, 7000)
    	}
    	
    function prev(){
    newSlide = sliderInt-1;	
    showSlide(newSlide);	
    }
    
    function next(){
    	newSlide = sliderInt+1;	
    showSlide(newSlide);
    	
    }
    
    function stopLoop (){
    	window.clearInterval(loop);
    	
    	
    	
    	}
    
    
    
    
    function showSlide(id){
    	stopLoop();
    	 if(id > count) {
    			id=1;
    			}else if(id < 1) {
    				id=count;
    				}
    							   
    		$("#slider>img").fadeOut(300);
    		$("#slider>img#" + id).fadeIn(300)
    		
    		sliderInt = id;
    		sliderNext = id + 1;
    		startSlider();
    	
    }
    
    $("#slider > img").hover(
    						 
    						 function(){
    							 
    							 stopLoop();
    							 },
    							 
    							 function() {
    								 startSlider();
    							 }
    							 
    							 
    						 
    						 )

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ontargett View Post
    I have tried changing this, my code look likes so, and it still only stays on the screen for 3 seconds
    That is strange.
    If I do the same, it's working:

    Did you upload the new slider.js, and refresh your browser after that (and empty the browser cache)?

    =======
    question 2

    The Previous and Next buttons are placed under the slider container, but cut off by the overflow: hidden; of the #slider.
    You can change it in overflow: visible; and there they are.

    Then you can remove the #slider a {margin-top: 30px;} to get them right under the slider.
    And change the height of the .slideshow in 290px, to get the following elements under the buttons.

  5. #5
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    157
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hey, apologies I thought I had replied to this the other day.

    It was my simple mistake of not uploading the JS file, thanks for the help


Bookmarks

Posting Permissions

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