Drupal 7: Views Slideshow Tutorial


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



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


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



Nice tutorial, but where do I add the pictures?
Dec 12, 2011

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

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

S. C. Cudi
Dec 16, 2011
The slideshow effects are changed under Slideshow settings. See "Configure slideshow" above
Feb 9, 2012
Thanks for the tutorial by the way. Really helpful and to the point.
Feb 9, 2012
Does not seem to work for me.
Apr 6, 2012
where will be images located? can we just put the path where the folder of images will be located?
Apr 26, 2012
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.
May 28, 2012
Thanks mate, great, simple and quick! )
Dec 28, 2012
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?
Jan 9, 2013
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
Jan 17, 2013
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
Simple tutorial ever on view slideshow. Thumbs uo
Mar 6, 2013
and how can i add videos ? for example vimeo urls ? how can i put image and videos in the same slide?
Mar 6, 2013
Nice tutorial,
but how to add button for next and previous slide ?? Thanks
May 22, 2013
Thank you, nice tutorial!

Good for quick start!
Jun 9, 2013

Jun 25, 2014
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
Best tutorial ever, specially because it's simple ;-)
Sep 4, 2014
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)
Nov 6, 2016