Drupal7 使用views_slideshow制作幻灯片带数字按钮

1.创建一个区块 

View name:slideshow //随便起 我这里用slideshow

Display format:Slideshow of fields //选择幻灯片和字段

点击Continue & edit

如图：

 

 

 

2.添加字段

添加字段先删除Content:title字段 点击Remove

如图

 

 

 

 

 

点击FIELDS右侧add按钮添加

Content: Image 

Global: View result counter

确认（Aapply）

如图

 

 

 

 

3.设置：Global: View result counter 直接点击这名字

勾选Exclude from display这一项 确认（Aapply）

如图

 

 

 

 

4.设置：Content: Image 直接点击这名字

Image style: cut //选择你默认的 我的这个是cut我自定义的

Link image to：Centent //链接内容

 

 

 

 

5.设置幻灯片字段点击 Format:Slideshow | Settings的Settings

 

找到下边Bottom Widgets

点击Pager

找到Pager fields

勾选Global: View result counter和Activate Slide and Pause on Pager Hover 确认(Apply)

 

 

 

 

完成后如下图 可以设置区块添加吧

 

 

 

 

附上CSS代码：

.skin-default {
    position:relative;
    z-index:10;
    width:100%;
    height:260px;
    overflow:hidden;
}
.views-slideshow-controls-bottom {
    position:absolute;
    bottom:10px;
    right:5px;
    z-index:20;
    font-size:12px;
}
.views_slideshow_pager_field_item{
    height:10px;
    line-height:10px;
    width:10px;
    display:block;
    padding:5px;
    margin-right:5px;
    background:#993300;
    border:1px solid #FF6600;
    text-decoration: none;
    text-align:center;
    color:#FEFEFF;
    cursor: pointer;
    float:left;
}
.views_slideshow_pager_field_item.active {
    padding:5px;
    background:#FFC68C;
    border:1px solid #FF6600;
    color:#FF6600;
}

 

最终效果

本文出自 “标玺信息” 博客，谢绝转载！