PublicCMS 功能页（模板片段） 第四篇 制作轮播图

上一篇完成了导航栏的制作和引用，这一篇讲解如何实现轮播图的制作

轮播图的代码，这段轮播图是用的官方的轮播图。我当时自己找了一个轮播图加载图片没有缓存，造成一定的带宽浪费，索性直接用官网的，省事。

<div id="shutter">
	<div id="index-focus" class="swiper-container swiper-container-horizontal">
		<div class="swiper-wrapper" style="transform: translate3d(-1140px, 0px, 0px); transition-duration: 0ms;"><div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="0" style="width: 370px; margin-right: 10px;">
			<a href="https://hi.rednn.com/place/click.do?id=44" target="_blank">
				<img src="./红名网_files/12-15-060575-711634957.jpg" alt="醉美白芍花">
			</a>
		</div>
		<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1" style="width: 370px; margin-right: 10px;">
			<a href="https://hi.rednn.com/place/click.do?id=42" target="_blank">
				<img src="./红名网_files/10-48-210315-1791033273.jpg" class="swiper-lazy swiper-lazy-loaded" alt="醉美桃花">
			</a>
		</div>
		<div class="swiper-slide swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="0" style="width: 370px; margin-right: 10px;">
			<a href="https://hi.rednn.com/place/click.do?id=44" target="_blank">
				<img src="./红名网_files/12-15-060575-711634957.jpg" alt="醉美白芍花">
			</a>
		</div>
		<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" style="width: 370px; margin-right: 10px;">
			<a href="https://hi.rednn.com/place/click.do?id=42" target="_blank">
				<img src="./红名网_files/10-48-210315-1791033273.jpg" class="swiper-lazy swiper-lazy-loaded" alt="醉美桃花">
			</a>
		</div>
		<div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="0" style="width: 370px; margin-right: 10px;">
			<a href="https://hi.rednn.com/place/click.do?id=44" target="_blank">
				<img src="./红名网_files/12-15-060575-711634957.jpg" alt="醉美白芍花">
			</a>
		</div>
		<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1" style="width: 370px; margin-right: 10px;">
			<a href="https://hi.rednn.com/place/click.do?id=42" target="_blank">
				<img src="./红名网_files/10-48-210315-1791033273.jpg" class="swiper-lazy" alt="醉美桃花">
			</a>
		</div>
	</div>
	<div class="swiper-pagination swiper-pagination-white swiper-pagination-clickable swiper-pagination-bullets">
		<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2"></span>
	</div>
	<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

开始修改代码，修改完毕剪切

<div id="shutter">
	<div id="index-focus" class="swiper-container">
		<div class="swiper-wrapper">
			<#list page.list as a>
			<div class="swiper-slide">
				<a href="${site.dynamicPath}place/click.do?id=${a.id!}" target="_blank">
					<img <#if a?is_first>src="${a.cover}"<#else>src="${a.cover}" class="swiper-lazy"</#if> alt="${a.title!}">
				</a>
			</div>
			</#list>
		</div>
		<div class="swiper-pagination swiper-pagination-white"></div>
	</div>
</div>

修改完毕，后台创建轮播图片段

注意条数和系统字段要填写，点击保存后粘贴制作好的代码到轮播图片段，再保存。引用制作好的轮播图片段

生成首页查看效果