Problem with Slick Carousel autoplay

hamburgerlove413 · November 14, 2014

Hello,

I'm creating a website that takes flickr photos from areas that you click on the map and loads them into a jquery carousel called Slick Carousel. Everything works fine except for I have this strange issue where the autoplay only begins if you click to another window or you manually move the thumbnails to the left or right. Then it works fine. Can anyone look at the code and see if they can see what I'm doing wrong?

<!DOCTYPE html>
<html>
 
 <head>

 
<!-- google maps api key -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAM4sSbWxrbwyXvGHvbH6piG5AlqLjtAMc&sensor=true" type="text/javascript"></script>
<!-- jquery -->
<script src="js/jquery.1.11.1.min.js"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<!-- scripts for lightbox -->
<script src="js/lightbox.min.js"></script>
<!-- script for actual display of images -->

<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<link href="css/lightbox.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" type="text/css">

</head>
 
<body>

<header>
    <h1>Time Capsule <i class="fa fa-space-shuttle"></i> </h1>
    <div id="drop_instructions">
    	<p>Ever wonder what a certain area looked like from the world's point of view? Now you can find out! Click on an area in the map and we'll show you that spot as the locals see it.</p>
        </div>
</header>

<section class="clearfix">

<div id="map_canvas"></div>

<div id="imagebox" class="slider-for">
	
    
    
</div>

</section>

<div class="slider-nav">



</div>


<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="js/map.js"></script>
</body>

</html>

$(document).ready(function() {
	$('#drop_instructions').hide();

	$('#header').click(function(){
		$('#drop_instructions').fadeToggle( "fast", "linear" );
	});

    //define lat and long globally so they can be used elsewhere
	var lat=0;
	var lng=0;
	var city='';
	var state='';

	var StartLatLng = new google.maps.LatLng(28.4158, -81.2989);
    
	$('#map_canvas').gmap({
		'center': StartLatLng, 
		zoom: 10,
		styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
	})
    
	.bind('init', function(event, map) { 
       
	    $(map).click( function(event) {
          //define date 
		   var year = $("#year").val();		   
		   var month = $("#month").val();
		   var day = $("#day").val();
		   
	
		    
		    //give current value to lat/long on click
			lat=event.latLng.lat();
			lng=event.latLng.lng();
			
			var latlng= event.latLng;
			
			 //input box with coordinates
			$('#latlng').val(lat+', '+lng); 

			geocoder = new google.maps.Geocoder();

			geocoder.geocode({'latLng': latlng}, function(results, status) {
			
			if (status == google.maps.GeocoderStatus.OK) {
				//Check result 0
				var result = results[0];
				//look for locality tag and administrative_area_level_1

				for(var i=0, len=result.address_components.length; i<len; i++) {
					
					var ac = result.address_components[i];

					if(ac.types.indexOf("locality") >= 0) city = ac.long_name;

					if(ac.types.indexOf("administrative_area_level_1") >= 0) state = ac.long_name;
				}
					//only report if we got Good Stuff

				if(city != '' && state != '' && year != '') {
				
					console.log("Hello to you are in "+city+", "+state+"! The date you chose is: " + month + " " + day + ", " + year);
				
				} else {
					console.log("YOU FORGOT TO PICK A YEAR!");
				}
			
			} //end of getting city
		
		//==============Image generation=================
		//get location from map click and inject data into URL
		var locationURL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a0f6800f62ea920f00472805d767ac5c&lat="+lat+"&lon="+lng+"&format=json&nojsoncallback=1";
	 	
	 	$.ajax({
				url: locationURL,
				dataType:  "json",
				success:function(data){
					var farmId;
					var serverId;
					var photoId;
					var secret;
					var title;
					//hide instructions once content is generated
					$('#instructions').fadeOut(500);

					//title the images for the city clicked on 
					$('#images_title').append('<h3>'+city+' , '+state+'</h3>');
					console.log(data);
					
					//generate thumbnails user can click on 
					for (i=0; i < 20; i++){
						farmId = data.photos.photo[i].farm;
						serverId = data.photos.photo[i].server;
						photoId = data.photos.photo[i].id;
						secret = data.photos.photo[i].secret;
						title = data.photos.photo[i].title;
						// make the urls for the DOM
						photoURL = "https://farm"+farmId+".staticflickr.com/"+serverId+"/"+photoId+"_"+secret+"_z.jpg";
						thumbURL = "https://farm"+farmId+".staticflickr.com/"+serverId+"/"+photoId+"_"+secret+"_s.jpg";
						
						//append the clickable thumbnails to the dom
						$('.slider-for').slickAdd('<div><img src="'+photoURL+'" alt="'+title+'" /></div>');
						$('.slider-nav').slickAdd('<div><img src="'+thumbURL+'" class="image_thumb" alt="'+title+'" /></a></div>');
					}

					//change background of page to an image that is displayed
					$("body").css("background-image", "url('"+photoURL+"')");
				}
		});

		});
	});    
	});
});

						
 $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
	 asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
 arrows: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true,
	autoplay: true,
    autoplaySpeed: 2000
});

Sign In

Problem with Slick Carousel autoplay

Recommended Posts

hamburgerlove413

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information