Last updated December 9, 2014. Created on March 27, 2010.
Edited by robtom, pzula, rtrapmonf, redndahead. Log in to edit this page.

Views Slideshow can be used to create a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View you create.

Potential uses

  • News item slideshow (such as the title, image, and teaser of the last five news articles submitted)
  • Show the last x number of y submitted (images, videos, blog entries, forum posts, comments, testimonials, etc.).
  • Rotate any image, based on Views filters.
  • Hottest new products for any e-commerce Drupal site.
  • Rotate contact links, share links, etc.
  • Heck, you could rotate entire nodes, categories, image galleries, etc. I wouldn't suggest it, but you have that power.
  • It's also a great space saver. Places where you had multiple images or multiple items such as RSS feeds or category listings can now be presented in a slideshow.
  • The possibilities are really endless, as the more ways you can think of to categorize and add to views, the more you can rotate.

Quick theming video

This video is useful for themeing the output of a Views Slideshow: http://www.youtube.com/watch?v=vbeEQSOLffY

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

lonelliott’s picture

For some reason, it does not list slideshow as an option when I try to choose a style under views. Any help would be greatly appreciated.

-Lon

redndahead’s picture

The only reason it wouldn't list it is if the module wasn't enabled or you are using the wrong version of views/views_slideshow. If you are using views 2 you need to use views_slideshow 2. If you are using views 3 you need to use views_slideshow 3

Hope this helps.

lonelliott’s picture

Thanks for the help. I had accidentally installed the 3.0. Got it working now. Now just trying to set it up for images. Its a steep learning curve but I am getting it.

redndahead’s picture

Go through this tutorial to help you out. http://drupal.org/node/755018

lonelliott’s picture

Thanks for all the help. Got it working for the most part. Hardest part was trying to center the images.

Let me know what you think.

http://mgso.us

redndahead’s picture

Looks like you may have one missing image, but otherwise it looks good. Great job.

GaryWong’s picture

Hi

So how did you do that? Was it purely CSS?

thx
gary

Gary

---
Victoria, BC
Canada

eidoscom’s picture

Hi!

I just want to know how to center the images in the slideshow... The javascript specifies top:0 and left:0 dinamically so all that I do to center the image via CSS is not working at all :( Can you let me and the commmunity knows how to do this please??

I have a gallery with a fixed height and some photos are horizontal and others vertical, so some doesn't fill all the region displaying the slideshow. These ones are displaying at top-left align but I want to show on the center like margin:auto.

I think it is necessary to change the javascript that controlls this but I don't know where to search for....

Thanks!

eidoscom’s picture

Just watch at the code of this page Center example.

Only needs to apply a CSS style!!!

parkej60’s picture

I just have one request and maybe there is a way to do this already, but I'd like to be able to take out or change the text that is displayed for the previous/next/pause controls. Usually I end up replacing these with images and the only way to get the text out of the is to go into the core of the module and remove it.

scottrouse’s picture

I just used CSS to hide the text and display an image for next, pause, previous, etc. That's better for accessibility, anyway.

-Scott

greenpaisley’s picture

Hi Scottrouse, your instructions in the past have been nice and clear!

Could you post instructions on how to use CSS to change the next, pause, and previous to images? I would VERY much appreciate it!

shaunbellis’s picture

Views slideshow for Dupal is amazing … there are no other words for it. I have used it on a few projects with little to no issues at all. However, the current project that I am working on isn't going as smoothly.

When the 'View style' is set to unformatted the preview returns the right amount of nodes but when slideshow is selected the query returns only one result. Puzzlingly, the SQL is exactly the same. I've viewed the source and there is only one item in the HTML also.

Any ideas?

staticred’s picture

I'm at a loss here trying to theme Views Slideshow, and could use some help.

I'm attempting to convert the "Featured Research" block at http://dlc.lled.educ.ubc.ca to use Views Slideshow so that it can display multiple entries. The wrinkle with this is that the associated image must be set as a background image, so that an overlay/watermark can appear over top of it.

I've got about halfway so far: the text appears and rotates well, but I can't seem to hook up the associated image.

Below is what I currently have for the theme (for reference, in views-view--feature-research--block.tpl.php). The view is set to use the SingleFrame slideshow option.

<?php
// $Id: views-view.tpl.php,v 1.13 2009/06/02 19:30:44 merlinofchaos Exp $
/**
* @file views-view.tpl.php
* Main view template
*
* Variables available:
* - $css_name: A css-safe version of the view name.
* - $header: The view header
* - $footer: The view footer
* - $rows: The results of the view query, if any
* - $empty: The empty text to display if the view is empty
* - $pager: The pager next/prev links to display, if any
* - $exposed: Exposed widget form/info to display
* - $feed_icon: Feed icon to display, if any
* - $more: A link to view more, if any
* - $admin_links: A rendered list of administrative links
* - $admin_links_raw: A list of administrative links suitable for theme('links')
*
* @ingroup views_templates
*/

?>

<!--
<?php

?>

-->

<div id="featureblock">
<div id="featureimage" <?php
                   
if ($view->display['block_1']->handler->handlers['field']['field_researchimage_fid']->original_value <> "") {
                    echo
"style="background-image: url(";
echo
$view->display['block_1']->handler->handlers['field']['field_researchimage_fid']->original_value;
                    echo "
);"";
                    }
?>
>
  <img src="/<?php print($directory);?>/images/feature_watermark.png" alt=""/>
</div> <?php // end "featureimage" div?>

<div id="featuretext">
  <div id="featurespacer">
<h3>
<?php // add in title
                            // echo $view->result[0]->node_title;
                           
?>

</h3>
<div>
<?php // add in teaser text
                           
if (!empty($rows)) {
                            echo
$rows;
                            }
                          
                          
                          
                           
?>

</div>
<div>
<?php // add in link to more
                               
echo $view->result[0];
                           
?>

</div>

  </div>
</div><?php // end "featuretext" div?>
</div> <?php // end "featureblock" div?>

This is the specific section I need to hook up with the slideshow view:

<div id="featureblock">
<div id="featureimage" <?php
                   
if ($view->display['block_1']->handler->handlers['field']['field_researchimage_fid']->original_value <> "") {
                    echo
"style="background-image: url(";
echo
$view->display['block_1']->handler->handlers['field']['field_researchimage_fid']->original_value;
                    echo "
);"";
                    }
?>
>
  <img src="/<?php print($directory);?>/images/feature_watermark.png" alt=""/>
</div> <?php // end "featureimage" div?>

I can't seem to find a place to do this, however. I would have thought this would go into the views-slideshow.tpl.php file:

<?php
// $Id: views-slideshow.tpl.php,v 1.1.2.2.2.4 2010/02/23 22:49:57 psynaptic Exp $

/**
* @file
* Default views template for displaying a slideshow.
*
* - $view: The View object.
* - $options: Settings for the active style.
* - $rows: The rows output from the View.
* - $title: The title of this group of rows. May be empty.
*
* @ingroup views_templates
*/

?>

<?php print $slideshow; ?>

but this doesn't work. Putting it in views-view-fields.tpl.php also doesn't work, but there doesn't seem to be a step in between them.

redndahead’s picture

No need to set it as a background image. You can just have the main image output first and then the overlay output second and by using negative margins in css move the overlay over the top of the image.

cmr-dupe’s picture

In views-view-fields--feature-research--block.tpl.php use:
$field->original_value['field_researchimage_fid'];
instead of:
$view->display['block_1']->handler->handlers['field']['field_researchimage_fid']->original_value;

dazzzler’s picture

i have set up the slideshow, and its working wonderfully.
How can i now be able to add captions to images?
I need to add seperate captions to each indivisual image in the slideshow.
Thanks!
G

redndahead’s picture

Just add another field to your view for the image caption. Or do you mean in the thumbnails? If you mean in the thumbnails you should use thumbnailhover.

dazzzler’s picture

hi, thanks for reading! i need captions for the images as i am not using thumbnails..when i am uploading images, i see text fields just for alternate text and the title...but i dont know how to add a caption filed here, so that i can add captions visible to viewers when they view the slideshow...
regards

heres a screenshot of what i see now.....just fields for title text and alt text:
http://thesmallfeatproject.com/sfp/sites/default/files/images/caption_0.jpg

G

redndahead’s picture

I would use the title field in the image. Then I would theme the field using views theming. This would allow me to take the title out and create a seperate div/p/span or what have you just for the caption.

If this doesn't make sense I would look for tutorials on views theming.

dazzzler’s picture

hi redndahead,
i went to views, and added a ' Content: Multiple - data description ' and got what i needed at last! it was right there!
anyone needs more specifics, do post here, and ill upload detailed steps with screen caps for you to follow...
thanks for your time!
:)
G

WI.Ventures’s picture

That's exactly what I needed to do as well. However I'm not sure what you are using, i'm just using cck, cck image field, views, and views slideshow.
I got the slideshow to work. I just need to format it and have an caption for each picture. If you would be willing to tell me or show me what you did I would thoroughly appreciate it.

dazzzler’s picture

sorry i just saw ure comment, ill upload a jpeg which u can follow - with the steps, ginne few minutes
G

dazzzler’s picture

hi,
ull need to follow this tutorial completely >> http://drupal.org/node/814132
after uve done that, c can just have a look at the jpeg ive uploaded here : http://www.flickr.com/photos/29525827@N03/4860251900/ (u may need to browse thru the photostream till u reach a pic anmed 'captions', hope pics big enough
and ure done.
im using the field where you can add a description for each image in the slideshow, and that displays like a caption below each pic in the s-show,

hope it helps..
G

WI.Ventures’s picture

It worked, just what i needed. Now i know what the delta subset on views is for. Thanks Again.

dazzzler’s picture

long live drupal! :)

kiran1234’s picture

We're getting ready to download Drupal 7.0 and implement it. Is there a special board to forum we can subscribe to get support. Thank you. Trade Show Displays

dazzzler’s picture

thanks for your valueable help.
regards
G

akoymakoydpl’s picture

how do i make the controls be images instead of PreviousPauseNext links?

redndahead’s picture

Using css make them a background image. Then set the text-indent: -2000px; or set the opacity to 0

akoymakoydpl’s picture

thanks

mysterri’s picture

First off, I *love* this module -- wonderfully flexible. There's only one tiny limitation I'm running up against. Is it possible with the current Slideshow to have "previous" and "next" arrows when using the thumbnailhover slide feature to navigate in the case where the number of thumbnails exceeds the space allotted for them? Right now, it's just creating a second row of thumbs. I could hack it, but I figured I'd simply ask the question before getting all geeky...
thanks in advance!

mash200’s picture

hi.

i don't know if this is where i should post a support question, but i didn't want to open an issue as i'm sure it's something i'm doing/not doing. also it is quite possibly a views question rather than slideshow but i'm not too sure. i have a views slideshow of images in a block using a single field with multiple values (up to 5) in a single node. i use argument 'Node ID from URL' to limit the view to content in a single node as per http://drupal.org/node/814132. everything is fine as long as there are 5 values. if less, the remaining empty potential field entries show as a blank breakout item (or pager depending on which option i use) and blank main frame slide.

is there a way to limit the view to the number of items to the number of actual entries? hope this is clear enough. i'm using Views 6.x-2.11 and Views Slideshow 6.x-2.3. there is a development page with 5 items at:

http://www.premierpowerengines.com/CMS/engines/products/1.6SigmaEngine

and 2 items at:

http://www.premierpowerengines.com/CMS/engines/products/1.6SigmaRaceEngine

many thanks,

mark

redndahead’s picture

So I figured out how to fix this. Under filter in your view choose [Your Image field] - list. Set it to True. This will exclude empty image fields. I have updated the tutorial you referenced with the changes.

mash200’s picture

thank you for taking the time to look into this, and for adding the solution to the tutorial to help folks in the future. i spent days going round in circles! it's a great module adding value to any site, and the tutorials you've written are really helpful for those new to it.

GOOD WORK!!!

ps - if you did think a jCarousel-like pager/breakout item menu as mentioned above was feasible and desirable, i think that would rock!

cheers again.

dwb17’s picture

I had achieved the same result alters the modules files, however you managed to solve my with three clicks.
Thank again.

DWyeth’s picture

My slideshow was working fine, but when I updated, it stopped working in FF, but is working fine in Chrome and IE. Now, if FF, it's only showing one slide. Any idea why?

DW

redndahead’s picture

Can you post an issue in the views slideshow issue queue please. Thank you

viavia’s picture

Kudos on this brilliant slideshow! I am impressed with all of the available features on the admin interface, as well as the helpful tutorials and demos. The slideshow seems nearly perfect for a project I am working on... except for the looping aspect.

I need to create a slideshow that leads in with a SWF (which only plays once), and then fades through a series of images (which loop indefinitely). Being a designer and somewhat new to Drupal, I am curious as to the skill level required to adapt the module to perform this way. Or can someone offer some guidance on how to pull this off?

Thanks in advance!

redndahead’s picture

You can start the slideshow paused. And have the flash go over the top of the slideshow. Then when the flash is finished you can run javascript that resumes the slideshow. $('slideshow-id').cycle('resume'); Not sure how to call javascript in flash, but I would think it might be possible.

viavia’s picture

Thanks for the lead!

tikboyx’s picture

how can i install this module? it seems i can't enabled this in my drupal module section... i cant check it in a box! pls help me...

redndahead’s picture

more than likely you downloaded the wrong version.

tikboyx’s picture

Thank you redndahead! it worked...

my problem now is how to use it! i used views_slideshow-6.x-2.3.tar and i followed all the instruction in Create the View and Set up the slideshow but it seems i am lost of track... where should i start first? i think there are few steps needed to do before what I've done... i think i skipped some of it!

jshoor’s picture

After spending a few days trying to get views_slideshow-6.x-2.3.zip to work (As soon as I would enable the slideshow view, nothing would display.), I stumbled across the fact that I needed to enable Controls and Pager in the Slideshow settings page. Once these settings were enabled, the slideshow started working. After that, I could remove the controls and pager since I did not really need them.

I hope this helps someone else.

haind’s picture

Hi, I'm really impress this module. It works well for me.
However, what I would like is to have a slide show from photos stream in one node instead of load photo from each node

Thanks you,

HaiND

evita_gr’s picture

has anybody used the alpha version of the module for drupal 7?
it seems that doesn't work.

redndahead’s picture

Use the dev release

rthuey’s picture

thinking this may be where my problems were as well. i tried to uninstall the alpha to put in the dev ver. i disable views slideshow cycle, save. disable views slideshow, save. i uninstall views slideshow cycle, uninstall confirm, and then get confirmation it was uninstalled. i uninstall views slideshow, uninstall confirm, and then get confirmation it was uninstalled. whether or not i then go back to lists page and save configuration. when i go back and look and/or try to add new module both of them are either listed on the page(not enabled though) or i get a message saying the module is already installed.

edit-
turns out i later had a similar issue removing another module. i was thinking i had a bigger issue. i started an 'uninstall module' thread and got this response
'disabling and uninstalling module still show on the modules page unless you physically remove the module's folder. Uninstalling is meant to clean up data and remove tables."

clear case of operator error

deelite’s picture

When i want to save the configuration of the slideshow (shows in an overlay) i get a file-download "style_option" as a json-file and the overlay doesn't close. Sometimes the config will be saved.

After that i can't open the config anymore - i have to reload the page.

This happens in any browser. Linux and Windows.

I use the latest dev.

zincdesign’s picture

I have used views slideshow plenty of times in Drupal 6 and I love it. First time with D7. I have a problem with the slideshow only running through once then disappearing. I dont have the "End slideshow after last slide" enabled so why isn't it starting at the beginning slide again?

Zinc Design Consultants

http://www.zincdesign.co.uk

greenpaisley’s picture

Hi!

I hope this is an okay place to post this. Please someone let me know if it belongs elsewhere!

I really like Views Slideshow, but the website I am making would look/flow so much nicer if only I could have the thumbnails sit to the left of the large slideshow images. I have been trying to figure out how to do this by having my slideshow be a "page" view and the thumbnails be a "block" view, but I'm not sure it was meant to be set up in this way. They don't seem to be able to be separated, or in other words, you don't seem to be able to even show the thumbnails without showing the large slideshow within the same block.

Thanks in advance if anyone is able to help!

mtbguy1’s picture

Just use an additional Content: Image field with a thumbnail image style in the view and under the Slideshow settings use the new image field for the pager.

Then you can float the large slideshow image with css....in your case, float it right and the thumbnails will appear to the left.

designate’s picture

You mean by adding this additional image to the content-type you may use this image as an pager? I'm looking for a way to change the pager within views slideshow from a thumbnail image to a "simple" circle like is used in nivo slider.

Designate web development
www.designate.nl
+31 (0)229 27 44 38

lakshan26’s picture

i am using views slide show to display vimeo videos but when playing video slider not pause. how do i solve this problem. I am new to drupal.

spideep’s picture

drupal 7
For some reason I can see the images on the Views UI but have no results at all on the block location.
I've placed that "Views:myblock" in the content area and I can only see the title on it.
I am using a Customized content type with a multiple values image field.

so sad about it. :/

_____________________
Alexis Rengifo
Spideep

bplee77’s picture

i can't figure this out. i've followed some guides, created a content type named slideshow, under fields, added link and image. then i've created several content under that content type. still nothing. i've downloaded 3x version for all the needed modules. i've also created several Views under structure, but each didn't work and when i try to delete them or disable them, i get this error message. please help!!!

Error message
PDOException: SQLSTATE[HY000]: General error: 1267 Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '=': SELECT s.uid, c.updated FROM {ctools_object_cache} c INNER JOIN {sessions} s ON c.sid = s.sid WHERE s.sid <> :session_id AND c.obj = :obj AND c.name = :name ORDER BY c.updated ASC; Array ( [:session_id] => WJQL0WOtJ4I5kynjHt-QB-F3iq54hEhjOjuvPqKBEUE [:obj] => view [:name] => slideshow_2 ) in ctools_object_cache_test() (line 114 of /home/bplee77/public_html/sites/all/modules/ctools/includes/object-cache.inc).
The website encountered an unexpected error. Please try again later.

robined’s picture

Possibly you're using jquery 1.8, which views doesn't like. Try changing it to 1.7.

bensita’s picture

I have tried to setup my views slideshow with a transparent png in front, because I want that image to work as a frame. Does anyone can help me? I looked everywhere I can, but I didn´t find what I was looking for.

Please!! I really like this slideshow, but if I can´t find a way to solve this, it would be useless :(

Salut

Hernan

jadowd’s picture

Hi there, Great Module... but I do have a question. I would like to be able to implement a little block with some regular node/block content over the top of my slide show, however, when I try this, my content is placed behind the views slideshow... I am a little lost... is there a way to do this?

Thanks,

jadowd’s picture

Well, nevermind... I seem to have figured it out... z-index does exactly what I want it too. :)

Thanks Anyway!

mizage’s picture

I've installed Views 3.x but I get the following message for Views Slideshow

Requires: Views (3.x) (incompatible with version )

I definitely have Views 3.x installed. Any ideas?

MedaForce’s picture

I'm pretty new to Drupal and I was given a site to work on that was built by someone else and I'm not really 100% sure how things work yet.

Anyway, I've tried searching and I have come up with nothing and I hope someone can help me out with this problem.

I'm trying to get the slideshow to start on slide #1 and work its way in order through all the slides. But for some reason when I start the slideshow it starts in random spots in the list But the slides are in the right order. Is there a command I have to put in (or take out) to have in my slideshow starting with slide #1?

jadowd’s picture

In the view edit page, you ought to have a setting that tells you to use a sort order, or randomize the slideshow...

Which version of drupal are you using, I will see if I can find it for you and direct you to the location of the setting.

Thanks,

royalty’s picture

If anyone is curious on how to use the pageanchorbuilder you have to declare the variable returnVal to whatever values you want inside the pager. I think this should be added to the documentation somewhere. I had to dig in the 3.0 release notes to find it.

An example would be returnVal = "ice cream";

This can be inserted in the advanced option values for the slideshow.

natureofdorset’s picture

I have installed the modules libraries and views slideshows and enabled them along with views slideshows cycles and I have copies the jquery.cycles and json2 files to my sites/all/libraries all as per instructions but I am still getting the following message when setting up my slideshow:

You need to install the jQuery cycle plugin. Create a directory in sites/all/libraries called jquery.cycle, and then copy jquery.cycle.all.min.js or jquery.cycle.all.js into it. You can find the plugin at http://malsup.com/jquery/cycle.

As I said, I have done this per the instructions on the views slideshow installation page. Have I missed something? My slideshow displays the first photo but does not move on to photo 2, nor do the next/previous commands work so it obviously has not got the jquery file it needs.

fkelly’s picture

I had same problem that has been discussed here. The instructions are clear as mud. The file name has to be:

"jquery.cycle.all.js"

or the minimized one.

These are in a directory names jquery.cycle so the path is:

jquery.cycle/jquery.cycle.all.js

That may be implicit in the instructions but it sure is not clear. Looks like lots of people are wasting lots of time trying to figure this out.

frank

valthebald’s picture

robined’s picture

Chances are you're using the Drupal default jquery. Use version 1.7. NB don't use 1.8, that breaks the views module. This took me hours to find out.