1

I have used Views Slideshow to generate a page slideshow. The rotation / cycle is working fine but I need to display a bulleted pager. Since I am not able to display any kind of pager, I started with trying to show a numbered pager first which is not working for me.

I have basically used this guide to setup numbered pagers.

However, I do not see the numbers after doing the same.

enter image description here

I have enabled the page controls and current page index for testing purpose. Below is what I get using Devel Themer module and the developer tools.

enter image description here

I just increased the height of the area which is supposed to display the pager so that I can click that area to show the themer information. I cannot see anything rendered in the div responsible for displaying the pager. Also, as I see in the template which is rendering the code for pager is simple.

From the file "views-slideshow-pager-fields.tpl.php" the code is the following.

<div id="<?php print $widget_id; ?>" class="<?php print $classes; ?>">
  <?php print $rendered_field_items; ?>
</div>

I do not understand why the pagers are not getting displayed. Where should I start looking for the fix?

  • 1
    Please, don't show the full browser window, in the screenshots. It makes the image difficult to see in the question, while we just need to see part of the browser window. – kiamlaluno Oct 12 '15 at 9:59
  • Agree but you have cropped off the Themer part and the div region which is important to see. Should we revert back to original image or this cropped part is enough to understand? – Raj Pawan Gumdal Oct 12 '15 at 10:25
  • If you feel there is something missing in the screenshot, you can edit them, but please don't re-add the full browser window. The images you used were i.stack.imgur.com/ofNt1.jpg and i.stack.imgur.com/p96nh.jpg. – kiamlaluno Oct 12 '15 at 11:16
  • Cropped to the maximum extent which includes full information. Thanks for your inputs. – Raj Pawan Gumdal Oct 12 '15 at 11:44
  • Thank you! Your collaboration has been fully appreciated. – kiamlaluno Oct 12 '15 at 11:47
5
+50

You can achieve pager using View Slideshow by following steps:

Step 1: In view, add Global: View result counter field and mark it as Exclude from display.

Step 2: Now click on Slideshow format settings, go to Pager part and select Global: View result counter field as a Pager Type.

enter image description here

Step 3: To give perfect bullets effect, you will have add some CSS as given below

.views-field-counter {
    float: left;
    margin-left: 5px;
}

.views-content-counter {
    text-align: center;
    width: 29px;
    background: url(../bullets.png) no-repeat scroll center center transparent;
    cursor: pointer;
}

Step 4: Please check out CSS Classes, ID's and HTML markups form below screenshot, which worked at my end.

enter image description here

  • Awarded the bounty, the clue was "Hide pager if only one slide exists" being unchecked. It was not working as it is supposed to be. – Raj Pawan Gumdal Oct 22 '15 at 18:20
  • However the problem with bulleted pagers is not yet solved. – Raj Pawan Gumdal Oct 22 '15 at 18:20
  • Try out the above steps to your local setup. Which theme you are using? – Nikhil Banait Oct 23 '15 at 5:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.