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

ravis’s picture

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

I work at Drupar.com

pixelsweatshop’s picture

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;
}
robert13’s picture

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^^

pixelsweatshop’s picture

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).

ergophobe’s picture

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;
}
haunted’s picture

Hello, i made a pager with cool images and it works well, however i noticed that in some sites, the slide changes when just hovering on the pager element without the need to click on it.
Any advice on how to achieve this? Thanks.