Jump to content

Problem with Slick Carousel autoplay


hamburgerlove413

Recommended Posts

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
});
		
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.