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.

Related: How to Remove Twenty Fourteen Author Name or Link

Layout options, Grid or Slider.

Layout options, Grid or Slider.

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

Default Twenty Fourteen slider

Default Twenty Fourteen slider

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. Additional link in case you have functions.php error, don’t panic! :D

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


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

Inside child theme folder hierarchy

Inside child theme folder

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:

This is how myautosliding.js looks like, change the 7000 to any preferred number

This is how myautosliding.js looks like, change the 7000 to any preferred number

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:

 

Autoplay Twenty Fourteen slider functions

Autoplay Twenty Fourteen slider functions.php

Note, if you have another code inside your functions.php, you can add it below <?php line
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.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook1Pin on Pinterest0Share on Reddit0Email this to someonePrint this page