MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How to make your Gallery Post rotate automatically

Please note: This FAQ Article is specifically for the Hemlock, Rosemary, Redwood, Florence, Laurel, Alder, and Oleander themes







By default, a post using the Gallery post format will not automatically switch slides or images on a timer. Instead, a visitor will click the left or right arrow buttons to browse through the gallery images. If you'd like to add a timer function to your gallery post's slide area, we've written up the steps to go about it below.

Please note: You will need to access one of the theme's JS files which is not located within the main theme file directory. This means that you will not be able to simply access the file via WordPress Dashboard > Appearance > Editor. Instead, you access & alter the file via FTP, or, via a code editor plugin such as WPide (recommended).




FOR THE ROSEMARY THEME


Open up the theme's "solopine.js" file (located within the "js" folder).
Beginning on approximately Line 20, you will see the following code:

$('.post-img .bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pager: false,
      captions: true
    });


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

$('.post-img .bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pager: false,
      captions: true,
      auto: true,
      pause: 5000
    });


In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer.
After you're done, be sure to also save the file.



FOR THE FLORENCE THEME


Open up the theme's "solopine.js" file (located within the "js" folder).
Beginning on Line 21, you will see the following code:

$('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pager: false,
      captions: true
    });


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

$('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pager: false,
      captions: true,
      auto: true,
      pause: 5000
    });


In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer.
After you're done, be sure to also save the file.



FOR THE HEMLOCK THEME


Open up the theme's "solopine.js" file (located within the "js" folder).
Beginning on Line 21, you will see the following code:

$('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pager: false,
      captions: true
    });


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

$('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pager: false,
      captions: true,
      auto: true,
      pause: 5000 
    });


In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer.
After you're done, be sure to also save the file.




FOR THE REDWOOD THEME

Open up the theme's "solopine.js" file (located within the "js" folder).
Beginning on Line 24, you will see the following code:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  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 bit of code with the following code instead:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  auto: true,
  pause: 5000,        
  nextText: '<i class="fa fa-angle-right"></i>',
  prevText: '<i class="fa fa-angle-left"></i>',
  onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }


In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer.
After you're done, be sure to also save the file.




FOR THE OLEANDER THEME

Open up the theme's "solopine.js" file (located within the "js" folder).
Beginning on Line 23, you will see the following code:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  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 bit of code with the following code instead:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  auto: true,
  pause: 5000,  
  nextText: '<i class="fa fa-angle-right"></i>',
  prevText: '<i class="fa fa-angle-left"></i>',
  onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});

In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer.

After you're done, be sure to also save the file.




FOR THE LAUREL THEME

Open up the theme's "solopine.js" file (located within the "js" folder).  Beginning on Line 47, you will see the following code:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  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 bit of code with the following code instead:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  auto: true,
  pause: 5000,  
  nextText: '<i class="fa fa-angle-right"></i>',
  prevText: '<i class="fa fa-angle-left"></i>',
  onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});

In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer. 

After you're done, be sure to also save the file.




FOR THE ALDER THEME

Open up the theme's "solopine.js" file (located within the "js" folder). 
Beginning on Line 29, you will see the following code:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  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 bit of code with the following code instead:

$('.post-img .bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade',
  pager: false,
  captions: true,
  auto: true,
  pause: 5000,  
  nextText: '<i class="fa fa-angle-right"></i>',
  prevText: '<i class="fa fa-angle-left"></i>',
  onSliderLoad: function(){
        $(".sideslides").css("visibility", "visible");
    }
});

In the new code you just added, there is a number value of "5000". This number is the timer that controls the speed of how often your gallery slides will rotate. It is measured in milliseconds, so "5000" means it will rotate approximately every 5 seconds. Feel free to change this number value to whatever speed you prefer. 

After you're done, be sure to also save the file.





Related keywords: #timer #slideshow #slide #auto