帝国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内容页模板调用作者writer的常用方法
帝国cms内容页模板调用作者字段,可以直接用[!--writer--]来表示,如果在后台编辑的时候,是通过增加再选择的作者名,那么作者字段调用出来的时候会自带链接,如何去掉字段链接,还有判断作者为空的时候,应该怎么调用,下面是青青模板网整理出的解决方案,供大家参考。
帝国cms常见问题2022-04-04帝国cms如何实现输入密码才能下载链接的方法?
帝国cms要实现输入密码才能下载内容的办法,可以增加一个mima字段,然后修改模型,再修改公共模板变量,下面是青青模板网整理的方法,供大家参考
帝国cms常见问题2022-04-05帝国cms内容页调用图片集的图片
帝国cms内容页调用图片集的图片,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于本篇内容在“帝国cms常见问题”中的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-26帝国cms修改编辑器的附件样式
帝国cms后台编辑器的附件样式在默认选择后,是一个表格和fieldset标签,想要更改样式,变成链接形式的,需要找到编辑器文件修改代码,下面是青青模板网整理的关于如何修改帝国cms编辑器附件样式的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2023-02-02帝国cms内容页模板用if来判断信息来源为空的调用方法
如果网站使用的是帝国cms后台,在前端页面有一个固定显示信息来源的标签,假如来源为空,那么整个前端字段如何做到为空就不显示?用if来判断的话应该怎么写,下面是青青模板网整理的关于怎么在帝国cms内容模板判断信息来源的方法。
帝国cms常见问题2022-04-04帝国cms模板调用教程之——替换模板
安装完帝国cms7.5utf-8版本以后,接下来内容就是替换原来的帝国cms模板,比如首页模板,列表模板,内容模板等。接下来青青模板网以《心情个人博客模板》为例,给大家整理了怎么调用帝国cms的模板标签。
帝国cms调用教程2022-03-29帝国CMS灵动标签中用if判断第X条附加特殊样式
用灵动标签调用文章的时候,如果没有特殊设置,每条文章的显示样式是一样的。有些人会追求“多彩”的外观,比如设置第三和第六条为红色或者加下划线等等,那么要怎么实现呢?
帝国cms常见问题2022-03-26
帝国cms如何实现在列表页模板调用标题分类下的所有文章?
如果你的网站信息以标题分类的形式来显示,比如杂志目录,书籍目录,通常在标题分类下又显示对应的信息,这样的分类在帝国cms终极栏目中是比较常见的一种用法。青青模板网整理了关于帝国cms用灵动标签在列表模板调用标题分类的方法,供大家参考。
帝国cms常见问题2022-03-31帝国cms迁移数据最稳妥的方法
帝国cms迁移数据,从一台旧的服务器把网站文件都搬迁到新的服务器,会涉及到附件,数据库信息等,很多人在搬迁的时候也会遇到各种问题,下面是青青模板网整理的关于如何搬迁帝国cms数据的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2023-03-22帝国cms灵动标签如何调用信息标题的关键词标签以及搜索链接?
帝国cms用灵动标签调用tags标签以及keyboard关键字词,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于本篇内容在“帝国cms常见问题”中的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-28