html:
<div class="swiper-container" id="topSwiper">
<div class="swiper-wrapper">
{% for wheel in wheels %}
<div class="swiper-slide">
<img src="{{ wheel.img }}" alt="{{ wheel.name }}">
</div>
{% endfor %}
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
css:
头部轮播图部分
#topSwiper {
height: 8rem;
width: 100%;
overflow: hidden;
}
#topSwiper .swiper-wrapper{
width: 100%;
height: 100%;
}
#topSwiper .swiper-wrapper a{
display: inline-block;
width: 100%;
height: 100%;
}
#topSwiper img{
width: 100%;
height: 100%;
}
#topSwiper .swiper-pagination{
bottom: 0px;
}
