dede结合bootstarp4制作幻灯片轮播图

admin2020-02-211355

效果:

image.png

全部功能有效。

代码:

//注意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');  
});


网友评论