MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How to add a timer to Hemlock's featured area slider

Please note: This FAQ Article is specifically for the Hemlock theme.


By default, Hemlock's featured area slider will not rotate slides automatically. If you'd like to add this feature in, we'll go through the necessary steps below.

Hemlock's Slider Timer Screenshot #1


First, you will need to access Hemlock's "solopine.js" file. This theme file is not within the main theme file directory, so you will not be able to access it simply via Appearance > Editor. You can either edit the theme file via FTP, or, via a code editor plugin. We recommend the code editor plugin called WPide.

Once WPide is installed & activated, you can navigate to WP Dashboard > WPide > themes > hemlock > "js" folder > and open up the file titled "solopine.js".

Beginning on Line 41, you will see the little section titled "//slider". It will look like this:

 // slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,2],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
});


We will add a new parameter at the bottom of the list to insert the timer feature. Underneath the parameter "itemsMobile", copy & paste in the following on a new, blank line:

autoPlay : 5000


When finished, your "//slider" section will now look like this:

// slider
$("#owl-demo").owlCarousel({
    navigation : false,
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,2],
    itemsTabletSmall: [568,1],
    itemsMobile : [479,1],
    autoPlay : 5000
});


The timer is measured in milliseconds, so the "5000" value represents the slides rotating every 5 seconds.
You can increase or decrease the rotation time to whatever you'd prefer.
Be sure to save the file when you're finished.