Setting Autoplay Twenty Fourteen Slider

As mentioned in my previous post, how to display featured content in Twenty Fourteen theme, that there is a layout’s option, called “Grid” and “Slider”.

By default, when you set the layout from “Dashboard”, “Appearance”, “Customize”, “Featured Content” and setting from “Grid” to “Slider” will make a nice slider section on your homepage.

How to Remove Twenty Fourteen Author Name or Link

This slider will have two arrow buttons that will play the slider itself when the arrow button is clicked.

If you’re happy with this then you can stop right here, but, if you want to set autoplay the slider, which means, whenever people load your websites homepage, the slider will be sliding alone from one featured post image to another.

To do this, we will need our custom javascript, and adding the php code to function.php of our child theme, click here if you need to create Twenty Fourteen child theme. Please backup your functions.php first. Additional link in case you have functions.php error, don’t panic! 😀

I have zero knowledge of Javascript, so I spent loooong time to find this useful javascript tutorial for setting autoplay.

Steps to set autoplay the slider

• Is my site loading fast? I use this shared hosting
• Try my theme >

1. Access your child theme folder mine, called, “twentyfourteenchild” with FTP client or cPanel directly.

2. Inside this folder, create a new folder, called, “js”, and inside js folder, create a javascript file, I call it, myautosliding.js like in hierarchy inside child theme folder in the screenshot above.

3. Inside myautosliding.js, add this following code:

jQuery(document).ready(function ($){

	var timeOut = null;
	var slidingPeriod = 7000; //change the 7000 to any number you like, 7000 means 7 seconds

	$('.featured-content .post-thumbnail img').mouseover(function(e,simulated){

		//what happen if you hover your mouse

		if(!simulated){

			clearTimeout(timeOut);

		//if you don't hover anymore
		}
	}).mouseout(function(e,simulated){
		timeOut = setTimeout(autoAdvance, slidingPeriod);
	});

	// An autoslide function

	function autoAdvance (){

		// Simulated by a click on the next arrow.
		$('#featured-content .slider-next').trigger('click',[true]);

		// Setting delay in 7 seconds, as explained above
		timeOut = setTimeout(autoAdvance, slidingPeriod);
	}

	autoAdvance();

});

Change the number (7000) to any number you like, 7000 means 7 seconds, because in javascript, it reads only milliseconds.

Also, when people hover their mouses on the featured content featured image, the slider will be paused.

4. Inside functions.php (from child theme) add this following code:

<?php
function my_autosliding_tf_child() {
	if (!is_admin()) {
	if (is_front_page()) {
	wp_enqueue_script( 'my_Autosliding', get_stylesheet_directory_uri() . '/js/myautosliding.js', '', '1.0', true );
	}
	}
}

add_action('wp_enqueue_scripts', 'my_autosliding_tf_child');

?>

 

The code basically means that when we login to admin page, the javascript won’t be loaded, and it’s only loaded when we visit homepage only (where the Slider is located).

This might help to not adding resources loaded when site loading speed becomes an attention.

So that’s how I set autoplay with Twenty Fourteen slider feature.