轮播图插件可以上传视频吗?要怎么做
迅睿框架 更新 2024-11-13 16:45:46
菜鸟的成长之路
菜鸟的成长之路
{if $t.leixing=='image'}
<a{if $t.url} href="{$t.url}" target="_blank"{/if}>
<img src="{dr_get_file($t.thumb)}" class="d-block w-100" alt="{$t.title}">
</a>
{elseif $t.leixing=='video'}
<video width="100%" height="auto" autoplay muted loop>
<source src="{dr_get_file($t.thumb)}" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
{/if
这段代码怎么使用呢?我想在轮播图部分使用视频而不是图片,可以用上面的代码来实现吗?具体要怎么做呢? 
<link rel="stylesheet" type="text/css" href="{HOME_THEME_PATH}css/swiper-bundle.min.css"/> <!--轮播图--> <div class="swiper banner"> <div class="swiper-wrapper"> {table table_site=carousel type=1 show=1 order=displayorder_asc num=10} <div class="swiper-slide"> {if $t.leixing=='image'} <a{if $t.url} href="{$t.url}" target="_blank"{/if}> <img src="{dr_get_file($t.thumb)}" class="d-block w-100" alt="{$t.title}"> </a> {elseif $t.leixing=='video'} <video width="100%" height="auto" autoplay muted loop> <source src="{dr_get_file($t.thumb)}" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video> {/if </div> {/table} </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="{HOME_THEME_PATH}js/swiper-bundle.min.js" type="text/javascript"></script> var mySwiper = new Swiper ('.banner', { loop: true, // 循环模式选项 parallax : true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, })这样就有效了