Simple slideshow with Views and jQuery cycle

In this tutorial, I'll show you how to create a slideshow in Drupal 7 using the Views modules and jQuery cycle. This will create a block that you can place on your drupal site. You can see a demo here

1. Prepare

Download: module views, ctools, jquery cycle

From admin menu, click Modules (youdrupalsite/admin/modules) and enable views, ctools

Enable modules

In this tutorial, I'm using default Drupal 7 theme: bartik (to keep the tutorial simple, you'd better to add to your own theme/subtheme so you'll not get lost when update drupal). Create folder js in bartik theme (you can find in /themes/bartik), extract jQuery cycle to theme folder

Next we need to add jQuery cycle to Drupal: open template.php file, find function bartik_process_page(&$variables) { and insert:

drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.cycle.all.min.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/script.js');

Or you can add you script path in the .info file of your theme: Open bartik.info, find stylesheets[print][] = css/print.css and insert:

scripts[] = js/jquery.cycle.all.min.js
scripts[] = js/script.js

script.js is a blank javascript file (we will add code after create views)

2. Create and configure new content type

Go to Structure / Content type and add Slideshow content type (youdrupalsite/admin/structure/types/add)

create slideshow content type

Add new slideimg field and remove body field

Click manage field

Add new field

After create image field, you need to add some demo content

3. Views

Create new views:

Create new views

Click "Continue & edit", remove all in "Fields" and add "Content: Slide image"

4. Finish

Enable block: Go to Structure / Blocks and move "slideshow: Block" to your region. In this example, I moved to "content region"

Without JavaScript, you will see all images; users can scroll up and down to view our slides. Now you need to add this js code to script

jQuery(document).ready(function() {
  // change slideshow with your view name
  jQuery('.view-slideshow .view-content').cycle({
    fx: 'fade'
  });
});

That wraps up this tutorial. If anyone has any questions feel free to drop us a comment or send us a question through our contact form.