聯(lián)系官方銷售客服
1835022288
028-61286886
投訴
已解決 輪播圖插件可以上傳視頻嗎?要怎么做
1 0
| 插件名稱 | 輪播圖管理 V2.9 |
| 插件作者 | 帝云網(wǎng)絡(luò) 私信 |
| 最近更新 | 2025-03-05 11:45:23 |
| 修復(fù)輪播圖類型的BUG |
{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 標(biāo)簽。
</video>
{/if
這段代碼怎么使用呢?我想在輪播圖部分使用視頻而不是圖片,可以用上面的代碼來實現(xiàn)嗎?具體要怎么做呢?
插件與代碼是支持的，，升級到最新版插件，你發(fā)的代碼就是判斷輪播圖是圖片還是視頻。
你得找JS輪播圖插件，首先把圖片輪播效果做起來。。。
比如 swiper7輪播圖插件，，以下只能給你寫個示例，，，具體還得自己網(wǎng)站調(diào)試。
下載 swiper7插件，
swiper-bundle.min.css 放到 /static/你的模板樣式目錄/css/swiper-bundle.min.css
swiper-bundle.min.js 放到 /static/你的模板樣式目錄/js/swiper-bundle.min.js
調(diào)用代碼如下
<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 標(biāo)簽。 </video> {/if </div> {/table} </div> <!-- 如果需要分頁器 --> <div class="swiper-pagination"></div> <!-- 如果需要導(dǎo)航按鈕 --> <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, // 循環(huán)模式選項 parallax : true, // 如果需要分頁器 pagination: { el: '.swiper-pagination', }, // 如果需要前進(jìn)后退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, })這樣就有效了