dede结合bootstarp4制作幻灯片轮播图
效果:
全部功能有效。
代码:
//注意id不要错了,bootstarp4上不同样式id不一样,错误会导致左右按钮失效 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> {dede:flash typeid='1' row='10' titlelen='255'} <li data-target="#carouselExampleIndicators" data-slide-to="[field:global name=autoindex/]" class="[field:global name=autoindex runphp="yes"]if(@me==1){@me='active';}else{@me='';}[/field:global]"></li> {/dede:flash} </ol> <div class="carousel-inner"> {dede:flash typeid='1' row='10' titlelen='255'} <div class="carousel-item [field:global name=autoindex runphp="yes"]if(@me==1){@me='active';}else{@me='';}[/field:global]"> <img src="[field:litpic/]" class="d-block w-100" alt="..."> </div> {/dede:flash} //左右按钮,代码直接复制过来,不需要适配,需要适配的代码都在上面 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
说明:
1、该方法适用于幻灯片插件,并非用栏目功能制作的幻灯片,不过原理一样。
2、div内的active替换为
[field:global name=autoindex runphp="yes"]if(@me==1){@me='active';}else{@me='';}[/field:global]
用来循环。
3、data-slide-to="1"替换为data-slide-to="[field:global name=autoindex/]"
[field:global name=autoindex/]为dede自增标签。
插件标签:
{dede:flash typeid='1' row='10' titlelen='255'} 自增变量[field:global name=autoindex/] 链接地址[field:arcurl/] 幻灯大图[field:litpic/] 幻灯小图[field:litimg/] 幻灯标题[field:title/] 内容描述[field:content/] {/dede:flash}
bootstarp幻灯片轮播图不支持移动端左右滑动
加入以下jquery代码即可实现
$('#carouselExampleIndicators').hammer().on('swipeleft', function(){ $(this).carousel('next'); }); $('#carouselExampleIndicators').hammer().on('swiperight', function(){ $(this).carousel('prev'); });