<div class="product-swiper">
<div class="swiper swiper-product" data-ident="product" data-speed="500" data-delay="4000" data-effect="slide" data-autoplay data-loop data-disableOnInteraction>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-row swiper-row">
<div class="row">
<div class="col-7">
<div class="entry-wrapper">
<h3 class="entry-title"><a href="#">服装器械公司响应式自适应网站模板</a></h3>
<div class="entry-text">
定制化建站模板，专为满足您的需求而设计。 ...
</div>
<a href="#" class="more">查看更多</a>
</div>
</div>
<div class="col-5">
<a href="#" class="thumbnail">
<img src="https://static.hongcdn.com/images/swiper-1.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-row swiper-row">
<div class="row">
<div class="col-7">
<div class="entry-wrapper">
<h3 class="entry-title"><a href="#">灯产品公司响应式自适应网站模板</a></h3>
<div class="entry-text">
定制化建站模板，专为满足您的需求而设计。 ...
</div>
<a href="#" class="more">查看更多</a>
</div>
</div>
<div class="col-5">
<a href="#" class="thumbnail">
<img src="https://static.hongcdn.com/images/swiper-2.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-row swiper-row">
<div class="row">
<div class="col-7">
<div class="entry-wrapper">
<h3 class="entry-title"><a href="#">工业产品公司响应式自适应网站模板</a></h3>
<div class="entry-text">
定制化建站模板，专为满足您的需求而设计。 ...
</div>
<a href="#" class="more">查看更多</a>
</div>
</div>
<div class="col-5">
<a href="#" class="thumbnail">
<img src="https://static.hongcdn.com/images/swiper-3.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-row swiper-row">
<div class="row">
<div class="col-7">
<div class="entry-wrapper">
<h3 class="entry-title"><a href="#">新能源产品公司响应式自适应网站模板</a></h3>
<div class="entry-text">
定制化建站模板，专为满足您的需求而设计。 ...
</div>
<a href="#" class="more">查看更多</a>
</div>
</div>
<div class="col-5">
<a href="#" class="thumbnail">
<img src="https://static.hongcdn.com/images/swiper-4.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</a>
</div>
</div>
</div>
</div>
</div>
<div class="product-thumbs-wrapper">
<div class="row">
<div class="col-7">
<div class="product-img-wrapper">
<div class="swiper-button-next" id="swiper-button-next-product"></div>
<div class="swiper swiper-galler gallery-thumb-8724719" id="swiper-thumb-product" data-slidesPerView="4" data-spaceBetween="4" data-breakpoints='{"768":{"slidesPerView":3,"spaceBetween":5}}' data-thumbs>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://static.hongcdn.com/images/swiper-1.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</div>
<div class="swiper-slide">
<img src="https://static.hongcdn.com/images/swiper-2.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</div>
<div class="swiper-slide">
<img src="https://static.hongcdn.com/images/swiper-3.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</div>
<div class="swiper-slide">
<img src="https://static.hongcdn.com/images/swiper-4.jpg" class="img-fluid" alt="swiper" width="600" height="400" loading="lazy" />
</div>
</div>
</div>
<div class="swiper-button-prev" id="swiper-button-prev-product"></div>
</div>
</div>
</div>
</div>
</div>
</div>
.cms_copyright {
display: none;
}
.product-swiper {
--swiper-navigation-size: 24px;
--swiper-theme-color: #ff0000;
padding:30px
}
.swiper-row .entry-title {
font-size: 26px;
}
.swiper-row .entry-title a {
color: var(--main-color);
}
.swiper-row .entry-title::after {
display: block;
content: "";
width: 80px;
height: 3px;
background: var(--main-color);
margin-top: 10px;
}
.swiper-row .entry-text {
font-size: 18px;
}
.swiper-row .more {
background: var(--main-color);
color: #fff;
padding: 5px 20px;
display: inline-block;
margin-top: 20px;
}
.product-thumbs-wrapper {
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
}
.product-img-wrapper {
position: relative;
}
