欢迎来到天天文库
浏览记录
ID:13434922
大小:450.00 KB
页数:8页
时间:2018-07-22
《drupal 7使用views_slideshow制作幻灯片带数字按钮的》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、Drupal7使用views_slideshow制作幻灯片带数字按钮的1.创建一个区块 View name:slideshow //随便起 我这里用slideshowDisplay format:Slideshow of fields //选择幻灯片和字段点击Continue & edit如图:2.添加字段添加字段先删除Content:title字段 点击Remove如图点击FIELDS右侧add按钮添加Content: Image Global: View result counter确认(Aapply)如图3.设
2、置:Global: View result counter 直接点击这名字勾选Exclude from display这一项 确认(Aapply)如图4.设置:Content: Image 直接点击这名字Image style: cut //选择你默认的 我的这个是cut我自定义的Link image to:Centent //链接内容5.设置幻灯片字段点击 Format:Slideshow
3、 Settings的Settings找到下边Bottom Widgets点击Pager找到Pager fields勾选Glo
4、bal: 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;
5、 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; t
6、ext-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;}最终效果转载请注明:笨男孩百度博客 http://hi.baidu.c
7、om/tf8615/
此文档下载收益归作者所有