Hello

I created a slideshow with views slideshow. I am able to put controls on it (previous, pause, next).
But i would prefer to have something like that: Example

On it you can see on which slide you are and by clicking on one of them switch on the good slide.

How can i do that?

Thank you by advance

Robert13

Comments

you will need to edit slider codes.
I suggest you to contact the module developer for this.

----------------
Premium Drupal Theme

You do not need to edit the slider code nor contact the developer to acheive this.

1. Add the field 'Global: View result counter' to your view
2. Go into Format > Slideshow >settings
3. Scroll down to 'Bottom Widgets'
4. Select 'Pager'
5. In the 'Pager Type ' drop down, choose 'Fields'
6. Select the previously added 'Global: View result counter'
7. Save your view
8. Add the following css (You may need to tweak this a bit)

.views-slideshow-controls-bottom {
  position:absolute;
  right:20px;
  bottom:20px;
}
.views-slideshow-pager-field-item {
  background: #FFFFFF;
  color:#FFFFFF
  display: inline-block;
  *display: inline; /*Fix for IE 7 */
  height: 22px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  margin-right: 2px;
  width: 22px;
  zoom: 1; /*Fix for IE 7 */
}
.views-slideshow-pager-field-item:hover {
  cursor: pointer;
  background:#DAD518;
  color:#DAD518;
}
.views-slideshow-controls-bottom .active {
  background:#DAD518;
  color:#DAD518;
}

Hello and thank you very much for your answers.

I've done what you said, nicoz, everything is working fine in spite of the buttons which stay behind the image. Thank you again i will try to fix it but i don't know how to do it for the moment^^

You just need to add a z-index to the element

.views-slideshow-controls-bottom {
  position:absolute;
  right:20px;
  bottom:20px;
  z-index:999;  /*<----Just increase this number until it shows.*/
}

Just don't do it too much as it will then show up over top of drupal's overlay (if you have that enabled).

Thanks nicoz - saved me a ton of time.

To save the next person some time too, I'm going to upload a few minor tweaks.
1. a couple of typos
- no semi-colon after the FFFFFF so it doesn't pick up the inline-block
- strangely, it uses underscores and not hyphens in .views_slideshow_page_field_item (in 6.x-3.0)

2. centered everything so the slide is centered in the field and the pager is centered under the slide.

.views-slideshow-controls-bottom {
  position:absolute;
  right:20px;
  bottom:20px;
  z-index:999;
  width: 100%;
}
.views_slideshow_cycle_teaser_section {
  margin:auto;
}
.views_slideshow_pager_field {
    background: none repeat scroll 0 0 #666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: auto;
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    width: 140px;
}
.views_slideshow_pager_field_item {
  background: #ccc;
  color:#ccc;
  display: inline-block;
  height: 22px;
  width: 22px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  margin-right: 2px;
  zoom: 1; /*Fix for IE 7 */
  *display: inline; /*Fix for IE 7 */
}
.views_slideshow_pager_field_item:hover {
  cursor: pointer;
  background:#1400eb;
  color:#1400eb;
}
.views-slideshow-controls-bottom .active {
  background:#B8B214;
  color:#B8B214;
}

Yosemite Explorer - hiking and climbing in Yosemite (drupal)