Simple Review Slider / Carousel – How To Guide (and 1 Support Question)

You can disable the URL query string for pagination in the settings:

A couple other notes:

1. The offset=0 option in the shortcode is unnecessary if you are using pagination.

2. If using the pagination for the carousel navigation, you can hide all pagination links except the next/prev link with css like this:

.glsr-pagination .page-numbers:not(.prev):not(.next) {
    display: none;
}

Or to only target the specific shortcode, use the class used in the shortcode option like this:

.custom-footer-testimonials-slider .page-numbers:not(.prev):not(.next) {
    display: none;
}

3. If you need a more advanced solution, you can use the undocumented site-reviews/paginate_links filter to build your own. The filter accepts two arguments: $links the generated links as HTML, $args the argument array used to build the links (use glsr_debug($args) to print this to the screen to inspect it).

4. Site Reviews only uses jQuery in the admin (since WordPress already uses it there). It uses vanilla javascript in the frontend.

• This reply was modified 4 years, 4 months ago by Gemini Labs.

Oh wow, sorry about that. I have found the setting you mentioned now.
I don’t know how I managed to miss that as I thought I looked everywhere.
Thanks for the tips!

PS: For some reason I did have to set the offset to 0, as it was always landing on page 2. So I just included that to enforce it.

• This reply was modified 4 years, 4 months ago by itguysconsulting.

Perhaps the URL query was making it start at page 2 when you reloaded the page?

Yes after finding the option to turn off the pagination URLs as pointed out above, I was able to remove the offset=0. Thanks, again!!!

—-

Just in case anyone follows this post in the future, ignore the original code above.
It had a couple defects, one resulting in a “#” refresh of the page after the first review slider transition started. Below is my latest JavaScript/jQuery that I am using with SiteReview plugin v4.6.3

This version also has a transitionCountLimit to prevent a page left open from constantly polling the site for the next review.

Also I should have mentioned that this code must be placed inside a document ready event handler:
jQuery(document).ready(function($) { ....... });

If you don’t have this already replace the ……. with the JavaScript code below, and ensure you enqueue jQuery with your script in functions.php as shown in bold below…

wp_enqueue_script('my-child-theme-script', get_stylesheet_directory_uri() . '/assets/js/MyChildThemeScript.js', <strong>array('jquery'), </strong>wp_get_theme()->get('Version'), true);

Revised ‘Text Widget’ Shortcode:
[site_reviews class="custom-footer-testimonials-slider" display="1" pagination="ajax" hide="response" fallback="No reviews yet."]

And below is the guts of the jQuery code, which handles the slider:

/* Slider for Footer Reviews */

// Settings:
var timeOutLength = 2000; // Milliseconds between transitions  
var transitionCountLimit = 20;  // Limit # of transitions 
                               // in case somebody leaves page open (prevents indefinite queries).
                               // Set to 0 for indefinite (not advised)

// Initializations:
var customFooterReviewsSliderPaused = false;
var customFooterTimeoutFunctionID = undefined;
var currentFooterPageNumber = 1;
var transitionCount = 0;

// Pause the slider on mouse enter:
$(".custom-footer-reviews-slider").on("mouseenter", function() {
  customFooterReviewsSliderPaused = true;
  if (customFooterTimeoutFunctionID != undefined) {
    // stop the next slide from appearing:
    clearTimeout(customFooterTimeoutFunctionID);
  }
});

// Resume the slider on mouse leave, even if transitionoCountLimit reached:
$(".custom-footer-reviews-slider").on("mouseleave", function() {
  customFooterReviewsSliderPaused = false;
  // Assuming the user is still interacting with the site and hasn't walked off.
  // So allowing another transitionCountLimit more slides to be shown.
  // Remove "transitionCount=1;" line below for a hard stop after transitionCountLimit is reached:
  transitionCount = 1;    
  advanceCustomReviewsSlider();
});

// Advance the slider, by finding the next available page button and clicking it
// Or go back to page 1:
function advanceCustomReviewsSlider() {
  if (customFooterReviewsSliderPaused  === false) {
    // Grab the set of navigation links:
    $navLinks = $(".custom-footer-reviews-slider .nav-links");
    // Find the current page we are on.
    $currentLink = $(".page-numbers.current", $navLinks);
    // Find the next page # link following this current page:
    $nextPage = $currentLink.next("a.page-numbers");
    if ($nextPage != undefined && $nextPage.length > 0) {
      // Click the next available page # link:
      $nextPage[0].click();
    } else {
      // No more pages... Go back to page 1:
      $page1 = $("a.page-numbers[data-page=1]");
      if ($page1 != undefined && $page1.length > 0) {
        $page1[0].click();
      } else {
        // Something went wrong, just terminate
        return;
      }      
    }
    // If slider isn't paused, then wait timeOutLength to show advance the slider:
    if (customFooterReviewsSliderPaused  === false) {
      customFooterTimeoutFunctionID = setTimeout(function() {      
    // Checks if there is a limit, and enforces, or if limit is 0 continues.
        if (transitionCountLimit > 0 && transitionCount < transitionCountLimit) {
          transitionCount++;
          advanceCustomReviewsSlider();
        } else if (transitionCountLimit == 0) {
          advanceCustomReviewsSlider();          
        } else {
          return;
        }
      }, timeOutLength); 
    }
  }
} 

// Delay timeOutLength seconds after page load before executing:
setTimeout(function() {
  // Do the first slider transition to the next review:
  transitionCount++;
  advanceCustomReviewsSlider();    
}, timeOutLength);