联系官方销售客服

1835022288

028-61286886

应用插件 版主:官方插件技术组
轮播图插件可以上传视频吗?要怎么做
类型:迅睿CMS 更新时间:2024-11-13 16:45:46 轮播图管理
插件 轮播图管理 V2.8
应用作者 帝云网络
发布时间 2021-04-16 13:44:30
更新时间 2024-08-04 17:26:30

{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

这段代码怎么使用呢?我想在轮播图部分使用视频而不是图片,可以用上面的代码来实现吗?具体要怎么做呢?

插件教程:https://www.xunruicms.com/doc/app-719.html

回帖
  • 帝云网络-长期接单
    #1楼    帝云网络-长期接单
    2024-11-13 10:49:33
    Edge 0
    插件与代码是支持的,,升级到最新版插件,你发的代码就是判断轮播图是图片还是视频。你得找JS轮播图插件,首先把图片轮播效果做起来。。。比如 swiper7轮播图插件,,以下只能给你写个示例,,,具体还得自己网站调试。下载 swiper7插件, swiper-bundle.min.css 放到 /static/你的模板样式目录/css/swiper-bundle.min.cssswiper-bundle.min.js 放到 /static/你的模板样式目录/js/swiper-bundle.min.js调用代码如下
    <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',
        },
    })

    这样就有效了



    满意答案
  • 菜鸟的成长之路
    #2楼    菜鸟的成长之路
    2024-11-13 16:45:46
    Edge 0
    @帝云网络-长期接单:我的版本不够新,升级到最新版插件,就很容易修改了,你的回答