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)[email protected]='active';[email protected]='';}[/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)[email protected]='active';[email protected]='';}[/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)[email protected]='active';[email protected]='';}[/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');  

});