帝国cms灵动标签调用swiper幻灯片的方法
在帝国cms中可以直接使用标签[phomeflashpic]调用幻灯片,但是现在所有浏览器已经不支持flash了,但幻灯片几乎在每个网站中都占着重要的位置,都是在首页导航下出现,现在最流行的幻灯片是swiper,swiper还可以支持移动端手势滑动。下面是青青模板网整理的关于帝国cms中使用swiper作为幻灯片的调用方法的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
第一步,下载swiper幻灯片插件,放到skin目录下,比如放到skin目录下的banner目录
第二步,在模板,首页模板,添加样式表以及html代码:
①、在</header>之前,加入以下代码:
<script src="[!--news.url--]skin/banner/js/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="[!--news.url--]skin/banner/css/swiper.min.css"> <script src="[!--news.url--]skin/banner/js/swiper.min.js"></script> <script src="[!--news.url--]skin/banner/js/banner.js"></script>
②、在首页放幻灯片的位置,换上以下代码:
<div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div> <div class="swiper-slide"><img src="/skin/banner/img/2.jpg"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div>
注意:这一步 <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div>是直接调用目录img下的图片,相当于是固定代码,以后替换不方便。
如果换成帝国cms灵动标签调用,通过后台上传和修改图片会方便很多。
第一种方案,调用插件-广告的图片:
<div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <!--调用广告分类ID=1下的3条图片--> [e:loop={"select picurl,url,adsay from {$dbtbpre}enewsad where classid=1 order by adid desc limit 3",0,24,0}] <a href="<?=$bqr[url]?>" target="_blank"><div class="swiper-slide"><img src="<?=$bqr[picurl]?>" alt="<?=$bqr[adsay]?>"></div></a> [/e:loop] </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div>
第二种方案,调用新闻数据库表的推荐信息的标题图
<div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <!--调用news新闻信息下的5条信息,并且要有标题图片才能显示--> [e:loop={'news',5,20,1,0,0}] <div class="swiper-slide"><a href="<?=$bqsr[titleurl]?>" target="_blank"><img src="<?=$bqr[titlepic]?>"></a></div> [/e:loop] </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div>
方案一和方案二都是在帝国cms经常会用到的幻灯片调用方式。这两种方式的调用,我建议从图片大小来考虑,比如1920*600这种宽屏的大图,建议用插件-广告的方式上传图片,然后调用方案就用第一种。如果说网站类似于门户新闻那种,第二种方案直接调用标题图会更方便。
以上就是关于帝国cms常见问题中"帝国cms灵动标签调用swiper幻灯片的方法"的全部内容,如果有遇到帝国cms常见问题其他问题的,可以在评论留言,或者加微信咨询。
相关文章
帝国cms列表模板如何调用图片集的图片?
如何在新闻系统模型使用图片集?并且把图片调用出来呢?帝国cms默认的新闻系统是没有图片集的,所以第一步是要增加一个字段,图片集。然后才是第二步,将图片集的小图调用出来,怎么实现呢?具体可以参考下面的步骤。
帝国cms常见问题2022-03-26帝国cms怎么设置栏目的id从1开始?
帝国cms栏目id设置从1开始,可以用以下方法实现,注意先备份下数据,如果没有成功的话,还可以恢复回来。让ID从1开始的方法如下:首先,进入myql,或者“备份与恢复数据”-“备份数据”
帝国cms常见问题2022-03-28帝国cms怎么用灵动标签调用信息的标题分类名称和地址?
帝国cms如何用灵动标签调用信息的标题分类名称和地址?下面是青青模板网整理的关于帝国cms灵动标签调用标题分类名称和地址的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-28帝国cms广告用灵动标签调用的方法
帝国cms广告的调用,在帝国cms系统标签中可以用[phomead]广告ID[/phomead],只需要填写广告id就可以了。但是图片会涉及到有固定的高宽,如果网站是做响应式的,固定的高宽会不适应,所以我们改用灵动标签来调用广告。下面是青青模板网整理的关于帝国cms灵动标签调用的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-04-02帝国cms模板调用教程之——万能标签的用法(二)
帝国cms万能标签的用法,我们在上一篇文章《帝国cms模板调用教程之——万能标签的详细说明(一)》中已经详细介绍了应该怎么调用,如果还不熟练,可以再跟着操作后面的调用步骤。下面青青模板网整理了《心情》这套首页模板的调用方法,供大家参考。
帝国cms调用教程2022-04-01帝国CMS灵动标签调用昨天、今天、某天及以前以后等时间发布的文章
帝国CMS灵动标签调用昨天、今天、某天及以前以后等特定时间发布的文章,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于本篇内容在“帝国cms常见问题”中的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-27帝国cms用灵动标签调用一级栏目ID的方法
帝国cms灵动标签调用所有顶级栏目,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于帝国cms灵动标签调用所有一级(定级)栏目的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-28帝国cms灵动标签常用的变量说明
帝国cms灵动标签是无需做标签模板,且模板内容为PHP代码,因而更灵活,可以使用php所有处理函数。青青模板网整理了灵动标签的常用变量说明。
帝国cms常见问题2022-03-28帝国cms官方发布的sitemap网站地图插件
方便搜索引擎收录网页,帝国cms官方发布了关于网页sitemap地图的插件,下面是青青模板网整理的插件安装以及使用的方法,供大家参考。
帝国cms插件2022-04-08帝国cms如何在列表页随机显示标题图片,并且压缩裁剪图片大小?
在帝国cms后台程序中,如果列表页没标题图的话,帝国cms会有个默认的无图的图片显示,那如果要随机显示图怎么做呢?随机同样会用到函数rand(),还需要将制作好的图片,放到指定的目录下,并且给图片标上序号,例如4张图片,就在rand写上rand(1,4)。压缩图片并且裁剪,可以用sys_ResizeImg,后面再写上图片的高宽,就可以了。
帝国cms常见问题2022-03-26