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

最新推荐文章于 2022-11-20 20:02:22 发布

ableengine

最新推荐文章于 2022-11-20 20:02:22 发布

阅读量1.5k

点赞数

分类专栏： Drupal

本文链接：https://blog.youkuaiyun.com/ableengine/article/details/8700541

版权

Drupal 专栏收录该内容

14 篇文章

订阅专栏

1.创建一个区块

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

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

点击Continue & edit

如图：

Drupal7 使用views_slideshow制作幻灯片带数字按钮 - 扬帆起航 - 外包服务

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;
}