幻灯列表
# 幻灯信息数据
网站banner的数据及其调用方式和代码组成；具体可参考后台属性说明
字段属性可参考 [幻灯表结构](doc:zkY2Y8Xb)
## 数据脚本
```cs
ViewBag.BannerInfo //原始数据集合
(List<BannerInfo>)ViewBag.BannerInfo //数据为List结构的集合；需要使用foreach循环；具体可参考示例代码
```
#### 示例代码
```cs
//显示电脑版banner图
@foreach (var item in ((List<BannerInfo>)ViewBag.BannerInfo).Where(x => x.BannerClass == 1))
{
@item.BannerPath //数据调用方式 @item.列名
}
//显示手机版banner图
@foreach (var item in ((List<BannerInfo>)ViewBag.BannerInfo).Where(x => x.BannerClass == 2))
{
...
}
//多个条件筛选 与（&&） 或（||）
@foreach (var item in ((List<BannerInfo>)ViewBag.BannerInfo).Where(x => x.BannerClass == 1 && x.BannerTyle == 1))
{
...
}
```
## 演示代码
`@using Yideas.Model;`所有模版必须包含此函数 具体可参考[模版文件介绍](doc:yjXnlr3x)
此演示代码的效果使用的是`Swiper`插件；具体可参考[Swiper文档](https://www.swiper.com.cn/)
```html
@using Yideas.Model;
<!DOCTYPE html>
<html>
<head>
<title>@Html.Config("WebSiteTitle")</title>
<meta name="keywords" content="@Html.Config("WebKeyWords")" />
<meta name="description" content="@Html.Config("WebDescript")" />
<!-- 引入Swiper插件所必须的css和js文件 -->
<link rel="stylesheet" href="@Html.TemplateDir()/css/swiper.min.css">
<script src="@Html.TemplateDir()/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
@foreach (var item in ((List<BannerInfo>)ViewBag.BannerInfo).Where(x => x.BannerClass == 1))
{
<div class="swiper-slide" style="background-image:url(@item.BannerPath)"><a href="@item.BannerLink"></a></div>
}
</div>
<!-- 分页器控件 -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- 前进后退按钮 -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
effect: 'fade',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
```
模板制作人员可以在上面代码基础上完善