phpcms 轮播图 （posid推荐位 ）调用 - 代码篇

效果图：

代码如下：

<!-- Swiper -->
	<div class="swiper-container swiper-banner">
	    <div class="swiper-wrapper">
	    {pc:content  action="position" posid="1" thumb="1" order="listorder DESC" num="5"}
	    	<div class="swiper-slide" style="height: 540px;background: url({IMG_PATH}hz_images/banner/banner-1.jpg) no-repeat center top;"></div>
		    {loop $data $r}
			    {if $r[thumb]}
			    <div class="swiper-slide" style="height: 540px;background: url({$r[thumb]}) no-repeat center center;background-size: 100% auto;"></div>
			    {/if}
		    {/loop}
	    {/pc}
	    </div>
	    <!-- Add Pagination -->
	    <div class="swiper-pagination"></div>
	    <!-- Add Arrows -->
	    <div class="swiper-button-next swp-button-next-banner"></div>
	    <div class="swiper-button-prev swp-button-prev-banner"></div>
  	</div>

代码最优 ~ 为啥？

1. 便面了轮播图不显示问题。

   • 避免了从未操作posid=1，即从未设置过banner图的问题。；
   • 看了上述代码，不难发现，无论推荐位posid是否勾选存有轮播图，页面上始终会显示{loop 循环}之前那张图片
     background: url({IMG_PATH}hz_images/banner/banner-1.jpg) no-repeat center top;

2. 避免了图片尺寸因bgsize定义而发生宽高的变形。

   看了代码，发现if $thumb为真，轮播图将会以 no-repeat center center bgsize:100% auto 的情况去填充。

以上就是关于“phpcms 轮播图 （posid推荐位 ）调用 - 代码篇 ” 的全部内容。