drupal 7 使用 FlexSlider 制作幻灯片

drupal 7的网站上使用FlexSlider module制作幻灯片。


第一步:

下载FlexSlider module。地址:

https://www.drupal.org/project/flexslider


第二步:

下载FlexSlider库。地址:

https://github.com/woocommerce/FlexSlider


第三步:

在drupal7网站上创建文件夹sites\all\libraries\flexslider(注意使用小写)

解压下载之后的FlexSlider库,把下列文件复制到 sites\all\libraries\flexslider下面:

flexslider.css

jquery.flexslider-min.js

jquery.flexslider.js( 这个也要加上去,不要以为加了jquery.flexslider-min.js这个就行了,不加这个的话会显示FlexSlider library not found. Please consult the README.txt for installation instructions.这个错误)

fonts(目录)


第四步:

开启以下module

FlexSlider

FlexSlider Fields

FlexSlider Views Style


第五步:

创建content type。

Name: Slide Show


给这个content type添加field:

label: Slideshow Image

Field Type: Image

Widget: Image


第六步:

添加content type为Slide Show的node,我这里添加三个节点,每个节点上传了一张用来给幻灯片展示的图片。

SlideShow_1,SlideShow_2,SlideShow_3


第七步:

添加views

Title: Slide Show

Display Format: FlexSlider

Items per page: 3


FILTER CRITERIA

Content: Published (Yes)

Content: Slideshow Image:title (not empty)


要显示的field中只选择 Content: Slideshow Image


第八步:

在block管理页面,把创建的这个view对应的block显示在你网站上要显示的region里面,我把它显示在footer作为测试,效果如下所示:

flexslider.gif