MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add a timer to Oleander's slider

Please note: This FAQ article is specifically for the Oleander theme.




To add a timer to Oleander's featured area slider in order to make the slides rotate automatically, we can make a slight adjustment to the theme's code.

First, we like to recommend installing a code editor plugin such as WPide in order to not only access the necessary theme file, but to also provide line numbers within the theme file itself. This makes following the below instructions much more easy.

Once you've installed WPide, you can navigate to
WP Dashboard > WPide > themes > oleander > "js" folder > and open up "solopine.js".
Between Lines 12 - 21, you should see this block of code for the slider:

// BXslider
$('.featured-area .bxslider').bxSlider({
    mode: 'fade',
    pager: false,
    nextText: '<i class="fa fa-angle-right"></i>',
    prevText: '<i class="fa fa-angle-left"></i>',
    onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});


You can replace that block of code with the following block of code instead:

// BXslider
$('.featured-area .bxslider').bxSlider({
    mode: 'fade',
    pager: false,
    auto: ($(".bxslider div.feat-item-wrapper").length > 1) ? true: false,
    pause: 5000,
    nextText: '<i class="fa fa-angle-right"></i>',
    prevText: '<i class="fa fa-angle-left"></i>',
    onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});


Do you see the bit in the new code that says "pause: 5000"? This tells WordPress how often to switch the slide. It is measured in milliseconds, so a number value of "5000" will change the slide once every 5 seconds.
You're welcome to increase or decrease this number value to whatever speed you prefer.

The new line of code above this tells the slider not to rotate if there's only 1 slide to display. It will remain static. However, if there's more than 1 slide to display, it will initiate the auto-rotate timer. 

Please be sure to save changes to the file when finished.
If you have a cache tool operating on your WP or browser, please also clear the cache to see the change.