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>
代码最优 ~ 为啥?
-
便面了轮播图不显示问题。
- 避免了从未操作
posid=1
,即从未设置过banner
图的问题。; - 看了上述代码,不难发现,无论推荐位
posid
是否勾选存有轮播图,页面上始终会显示{loop 循环}
之前那张图片
background: url({IMG_PATH}hz_images/banner/banner-1.jpg) no-repeat center top;
- 避免了从未操作
-
避免了图片尺寸因
bgsize
定义而发生宽高的变形。看了代码,发现if $thumb为真,轮播图将会以
no-repeat center center
bgsize:100% auto
的情况去填充。
以上就是关于“phpcms 轮播图 (posid推荐位 )调用 - 代码篇 ” 的全部内容。