Xây dựng Drupal Slideshow với Views Slideshow.Module

Xây dựng Drupal Slideshow với Views Slideshow.Module

Views Slideshow is the most popular module for creating slideshows in Drupal.

Earlier this year we showed you how to use Views Slideshow to create a basic slideshow.

One of our students read that tutorial and wondered about taking things further. They wanted to create a slideshow with smaller thumbnails, similar to the one you see on WhiteHouse.gov, Grammy.com and many other Drupal sites. In this tutorial, we show you how to create a more advanced slideshow, similar to those famous sites.

Xây dựng Drupal Slideshow  với Views Slideshow.Module

Step 1: Installation

You're also going to need a single file that contains a JQuery slideshow script. This will need to be uploaded manually.


  • Download the file which will be called jquery.cycle.all.js
  • Access your site files.
  • Browse to the /sites/all/ folder.
  • Create a folder called /ibraries/ so that the path is /sites/all/libraries/
  • Create a folder called /jquery.cycle/ so that the path is /sites/all/libraries//jquery.cycle/
  • Upload the jquery.cycle.all.js file into that last folder.


Step 2: Views

We're going to create our slideshow using Views.

  • Go to Structure > Views > Add new view.
  • Check Create a block
  • Choose Slideshow for the Display format
  • Choose 1 for the Items per page


  • Click Add.
  • Select Image.
  • Click Apply (All displays).
  • Set the Image style to Large. We'll change this again later.
  • Click Apply (All displays).
  • Click Add.
  • Select Image.
  • Check the box which says Exclude from display.
  • Set the Image style to Thumbnail. We'll also change this later.
  • Click Apply (All displays).
  • Click Content:Title
  • Click Remove

Once you're finished, your fields area should look like the area below.


  • Find the Format area on the left-hand side of the Views page.
  • Click Settings next to Slideshow.


  • Scroll down to the cycle options.
  • Check the box Pager under Bottom Widgets.
  • Select the second of the two Image fields as the Pager fields..


  • Click Apply (All displays).
  • Click Apply (All displays). It should be close to looking like an active slideshow, but it will still have design problems. Your images won't be the perfect size yet and your smaller images will be stached vertically.


  • In the center of your Views screen, set the Pager so that it contains the number of small iterms you want underneath your main image.
  • Click Save to record all your changes so far.


Step 3: Design

First, let's set up the correct style for our images:

  • Go to Configuration > Image Styles.
  • Click Add style.
  • Enter slideshow_main
  • Click Create new style
  • Next to Select a new effect, choose Resize and click Add
  • Enter the height and width you'd like for your main slideshow image. Don't worry about getting it exactly right first time. You can always come back and change this size.
  • Click Save

Now let's create the style for our smaller thumbnails.

  • Repeat the process above.
  • This time create a style called slideshow_pager

Now, we'll apply those styles to our View.

  • Go to Structure > Views.
  • Click edit next to your slideshow view.
  • Click on the first Image field and set Image style to slideshow_main
  • Click on the second Image field and set Image style to slideshow_pager

Now click Save and let's go see your slideshow.

  • Go to Structure > Blocks.
  • Publish your view.

The final remaining problem is going to be the vertical images. We can fix that with CSS.

  • Go to your theme's CSS file.
  • Add some code like this:

1..views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 5px 19px 0 0; }

As a final step, you will need to tweak your image styles and your CSS to match your design.

Here's my end result, after this tutorial, and using dummy images:


Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Tìm kiếm bất động sản





Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

August's hottest apps to download

Best Apps 2011: This year's hottest apps

As the Apple App Store, Android Market and BlackBerry App World continue to swell, keeping an eye on the apps that are actually of any use remains a trickier task than ever.

Google adsence

Kiếm tiền bằng Google Adsense mà không cần có blog riêng

Say một thời gian lang thang trên mạng, tôi đã đúc kết được một vài kinh nghiệm và chia sẻ với các bác muốn kiếm tiền với Google Adsense mà không có blog/website.

Hướng dẫn custom Panels Layouts và Content Types trong Drupal 7

Hướng dẫn custom Panels Layouts và Content Types trong Drupal 7

This blog post will show you how to use and customize some of the features in panels including layouts and content types.



Drupal Services