注册 | 登录 | QQ登陆 |

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

发布时间:2021-01-28人气:-


全部功能有效。


代码:

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

});


上篇:dede:channel调用里的typeid没效果,无法指定...

下篇:vDedecms自定义表单“数据校验不对,程序返回错误”的解...