Sometimes, you'd rather use arrows as controls, instead of the "previous", "pause" and "next" text. This video shows how to use arrows, as well as how to position them using CSS.

Views Slideshow Configurable Controls

There may be times when you want to use images as controls instead of text, or use the "Previous" and "Next" text, but not include the "Pause" option. The Views Slideshow Configurable Controls module will allow you to do just that.

Install

Enable

  • Views Slideshow Configurable Controls

Let's edit the Featured Content Block View. And first, we'll enable the controls on the top.

  • Edit the view
  • Select 'Block'
  • In the Format section, click "Settings" next to "Slideshow"
  • Scroll Down and check the box for "Controls" in the Top Widgets section
  • Apply and save

Now, we have the text controls at the top of our slideshow.

Now, we'll just disable the "Pause" option.

  • Edit the view
  • In the Format section, click "Settings" next to "Slideshow"
  • Controls Type: Configurable controls
    • [ ] Display pause control

Now you see the "Previous" and "Next" pagers, but "Pause" is no longer an option. Let's take a look at how we can use images instead of text.

  • Edit the view
  • In the Format section, click "Settings" next to "Slideshow"
  • Scroll down to the "Controls" widget settings
  • Controls skin: Black icons

Now, we have arrows to move to the previous and next slides.

If you'd like to position the arrows on top the sides, you can just use some CSS like the following:

.vscc-controls {
position: relative;
z-index: 99;
}
 
.vscc_controls_previous {
position: absolute;
top: 180px;
left: 0px;
background: #eee;
padding: 0 5px 5px;
border: 2px solid #333;
border-radius: 5px;
}
 
.vscc_controls_next {
position: absolute;
top: 180px;
right: 0px;
background: #eee;
padding: 0 5px 5px;
border: 2px solid #333;
border-radius: 5px;
}

The nice thing about this module is that there are hooks that you can hook into to provide your own themes. This means that you're not limited to the black and white arrows. If you decide to look into that, take a look inside the module folder for examples of how to use the hooks in your own module.