Drupal 7: Views Slideshow Tutorial

What

Use the Views Slideshow module to create a slideshow of 900×200 images.

Installation

Modules

jQuery Cycle

  • rename it jquery.cycle.all.min.js and move it to /sites/all/libraries/jquery.cycle (add needed folders)

Create content type

  • name it “Slide”
  • add image field “Slide Image”

Create image style

  • /#overlay=admin/config/media/image-styles/add
  • name it “slide”
  • add “Resize” effect of 900×200

Create view

  • /#overlay=admin/structure/views/add
  • select type Slide
  • uncheck Create a page
  • check Create a block
  • select Display format Slideshow of fields
  • Continue and edit button

Configure view

Add image field

  • add field Content: Slide Image
  • uncheck Create a label
  • Image style: slide (it's the image type we created previously)

Configure slideshow

  • under FORMAT, next to Format: Slideshow, click on Settings
  • configure as you wish

Show slidehow block

  • /#overlay=admin/structure/block
  • find it under Disabled and assign it to a region

Notes

  • the “image style” will create resized images in /sites/default/files/styles/slide/public. It's especially useful if we use images from an existing content type because the original images won't be touched.

Reference

Feedback

Nice tutorial, but where do I add the pictures?
Tim
Dec 12, 2011
#1
tim-time@hotmail.com

pm me please
Tim
Dec 12, 2011
#2
Add content -> Slide
Jérôme Jaglale
Dec 12, 2011
#3
very nice tutorial THANKS!!

but i have a question how can i change the slideshow effects?

Thanks
S. C. Cudi
Dec 16, 2011
#4
The slideshow effects are changed under Slideshow settings. See "Configure slideshow" above
Simon
Feb 9, 2012
#5
Thanks for the tutorial by the way. Really helpful and to the point.
Simon
Feb 9, 2012
#6
Does not seem to work for me.
B.S.J
Apr 6, 2012
#7
where will be images located? can we just put the path where the folder of images will be located?
Ace
Apr 26, 2012
#8
Hi, thanks for the tuto, any idea how to build a slideshow with 5 nodes at a time : 5 last news, then 5 other news...
Thanks a lot.
VinyinBleau
May 28, 2012
#9
Thanks mate, great, simple and quick! )
Kivikall
Dec 28, 2012
#10
Not sure how to add folder /sites/all/libraries/jquery.cycle
how can I add folder 'jquery.cycle' - working on Windows, it do not accept '.' in folder name. Any suggestions?
Jag
Jan 9, 2013
#11
I'm working on windows to and I didn't have any problem making folders. Make a map jquery.cycle and in that map put the folder
jquery.cycle.all.js
claudine
Jan 17, 2013
#12
the configuration of slide does not give effect on the image. Can you pl tell how to overlay a text line on the image?

Thank you.
Sunny Kumar
Feb 20, 2013
#13
Simple tutorial ever on view slideshow. Thumbs uo
oyekunmi
Mar 6, 2013
#14
and how can i add videos ? for example vimeo urls ? how can i put image and videos in the same slide?
Pet
Mar 6, 2013
#15
Nice tutorial,
but how to add button for next and previous slide ?? Thanks
iyoii
May 22, 2013
#16
Thank you, nice tutorial!

Good for quick start!
kost
Jun 9, 2013
#17
Thank's

Jun 25, 2014
#18
I get the message:
"No main frame module is enabled for views slideshow."
I put the structure in a panel, and only the title shows.
Jim Rome
Aug 10, 2014
#19
Best tutorial ever, specially because it's simple ;-)
JC
Sep 4, 2014
#20
For the "No main frame module is enabled for views slideshow." message, just don't forget to enable the Views Cycle module (http://www.drupal.org/project/views_cycle)
plopen
Nov 6, 2016
#21