使用灵动标签调用swiper幻灯片的方法和解决思路

在帝国cms中可以直接使用标签[phomeflashpic]调用幻灯片，但是现在所有浏览器已经不支持flash了，但幻灯片几乎在每个网站中都占着重要的位置，都是在首页导航下出现，现在最流行的幻灯片是swiper，swiper还可以支持移动端手势滑动。

帝国默认幻灯片调用代码：

1、显示表最新的头条信息（数字13代表头条，数字3代表最新）

[phomeflashpic]0,4,280,255,0,0,13,3[/phomeflashpic]

2、显示栏目最新的推荐信息并且显示标题（数字2代表栏目推荐，后来的数字0代表栏目最新）

[phomeflashpic]7,4,280,255,1,40,2,0[/phomeflashpic]

swiper设置方法如下：

第一步，下载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这种宽屏的大图，建议用插件-广告的方式上传图片，然后调用方案就用第一种。如果说网站类似于门户新闻那种，第二种方案直接调用标题图会更方便。