问题描述
您好,我正在尝试创建自定义轮播,但无法正常工作。我尝试了不同的方法。但它现在正在工作,我也附上了图像,图像堆叠在彼此的顶部。这里的 HTML 代码属于 shopify 主题。在此代码中,我想以滑块格式显示推荐产品
$(document).ready(function() {
$("#news-slider").owlCarousel({
items : 3,itemsDesktop:[1199,3],itemsDesktopSmall:[980,2],itemsMobile : [600,1],navigation:true,navigationText:["",""],pagination:true,autoplay:true
});
});
.post-slide{
background: #fff;
margin: 20px 15px 20px;
border-radius: 15px;
padding-top: 1px;
Box-shadow: 0px 14px 22px -9px #bbcbd8;
}
.post-slide .post-img{
position: relative;
overflow: hidden;
border-radius: 10px;
margin: -12px 15px 8px 15px;
margin-left: -10px;
}
.post-slide .post-img img{
width: 100%;
height: auto;
transform: scale(1,1);
transition:transform 0.2s linear;
}
.post-slide:hover .post-img img{
transform: scale(1.1,1.1);
}
.post-slide .over-layer{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
opacity:0;
background: linear-gradient(-45deg,rgba(6,190,244,0.75) 0%,rgba(45,112,253,0.6) 100%);
transition:all 0.50s linear;
}
.post-slide:hover .over-layer{
opacity:1;
text-decoration:none;
}
.post-slide .over-layer i{
position: relative;
top:45%;
text-align:center;
display: block;
color:#fff;
font-size:25px;
}
.post-slide .post-content{
background:#fff;
padding: 2px 20px 40px;
border-radius: 15px;
}
.post-slide .post-title a{
font-size:15px;
font-weight:bold;
color:#333;
display: inline-block;
text-transform:uppercase;
transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover{
text-decoration: none;
color:#3498db;
}
.post-slide .post-description{
line-height:24px;
color:#808080;
margin-bottom:25px;
}
.post-slide .post-date{
color:#a9a9a9;
font-size: 14px;
}
.post-slide .post-date i{
font-size:20px;
margin-right:8px;
color: #CFDACE;
}
.post-slide .read-more{
padding: 7px 20px;
float: right;
font-size: 12px;
background: #2196F3;
color: #ffffff;
Box-shadow: 0px 10px 20px -10px #1376c5;
border-radius: 25px;
text-transform: uppercase;
}
.post-slide .read-more:hover{
background: #3498db;
text-decoration:none;
color:#fff;
}
.owl-controls .owl-buttons{
text-align:center;
margin-top:20px;
}
.owl-controls .owl-buttons .owl-prev{
background: #fff;
position: absolute;
top:-13%;
left:15px;
padding: 0 18px 0 15px;
border-radius: 50px;
Box-shadow: 3px 14px 25px -10px #92b4d0;
transition: background 0.5s ease 0s;
}
.owl-controls .owl-buttons .owl-next{
background: #fff;
position: absolute;
top:-13%;
right: 15px;
padding: 0 15px 0 18px;
border-radius: 50px;
Box-shadow: -3px 14px 25px -10px #92b4d0;
transition: background 0.5s ease 0s;
}
.owl-controls .owl-buttons .owl-prev:after,.owl-controls .owl-buttons .owl-next:after{
content:"\f104";
font-family: FontAwesome;
color: #333;
font-size:30px;
}
.owl-controls .owl-buttons .owl-next:after{
content:"\f105";
}
@media only screen and (max-width:1280px) {
.post-slide .post-content{
padding: 0px 15px 25px 15px;
}
}
<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="8">
<div id="news-slider">
<div class="post-slide">
<div class="post-img">
{%- for product in recommendations.products -%}
<img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
{%- endfor -%}
</div>
</div>
</div>
</div>
请有人可以检查我的代码哪里错了?
解决方法
你需要像这样改变你的html结构:
<div id="news-slider" class="carousel-wrap">
<div class="post-slide owl-carousel">
{%- for product in recommendations.products -%}
<div class="post-img">
<img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
</div>
{%- endfor -%}
</div>
</div>
所以,每个 div 里面都有单独的图像。当前,您将所有图像附加到一个 div 中。
演示代码:
$(document).ready(function() {
$(".post-slide").owlCarousel({
items: 3,itemsDesktop: [1199,3],itemsDesktopSmall: [980,2],itemsMobile: [600,1],navigation: true,navigationText: ["",""],pagination: true,autoPlay: true
});
});
.post-slide {
background: #fff;
margin: 20px 15px 20px;
border-radius: 15px;
padding-top: 1px;
box-shadow: 0px 14px 22px -9px #bbcbd8;
}
.post-slide .post-img {
position: relative;
overflow: hidden;
border-radius: 10px;
margin: -12px 15px 8px 15px;
margin-left: -10px;
}
.post-slide .post-img img {
width: 100%;
height: auto;
transform: scale(1,1);
transition: transform 0.2s linear;
}
.post-slide:hover .post-img img {
transform: scale(1.1,1.1);
}
.post-slide .over-layer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: linear-gradient(-45deg,rgba(6,190,244,0.75) 0%,rgba(45,112,253,0.6) 100%);
transition: all 0.50s linear;
}
.post-slide:hover .over-layer {
opacity: 1;
text-decoration: none;
}
.post-slide .over-layer i {
position: relative;
top: 45%;
text-align: center;
display: block;
color: #fff;
font-size: 25px;
}
.post-slide .post-content {
background: #fff;
padding: 2px 20px 40px;
border-radius: 15px;
}
.post-slide .post-title a {
font-size: 15px;
font-weight: bold;
color: #333;
display: inline-block;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover {
text-decoration: none;
color: #3498db;
}
.post-slide .post-description {
line-height: 24px;
color: #808080;
margin-bottom: 25px;
}
.post-slide .post-date {
color: #a9a9a9;
font-size: 14px;
}
.post-slide .post-date i {
font-size: 20px;
margin-right: 8px;
color: #CFDACE;
}
.post-slide .read-more {
padding: 7px 20px;
float: right;
font-size: 12px;
background: #2196F3;
color: #ffffff;
box-shadow: 0px 10px 20px -10px #1376c5;
border-radius: 25px;
text-transform: uppercase;
}
.post-slide .read-more:hover {
background: #3498db;
text-decoration: none;
color: #fff;
}
.owl-controls .owl-buttons {
text-align: center;
margin-top: 20px;
}
.owl-controls .owl-buttons .owl-prev {
background: #fff;
position: absolute;
top: -13%;
left: 15px;
padding: 0 18px 0 15px;
border-radius: 50px;
box-shadow: 3px 14px 25px -10px #92b4d0;
transition: background 0.5s ease 0s;
}
.owl-controls .owl-buttons .owl-next {
background: #fff;
position: absolute;
top: -13%;
right: 15px;
padding: 0 15px 0 18px;
border-radius: 50px;
box-shadow: -3px 14px 25px -10px #92b4d0;
transition: background 0.5s ease 0s;
}
.owl-controls .owl-buttons .owl-prev:after,.owl-controls .owl-buttons .owl-next:after {
content: "\f104";
font-family: FontAwesome;
color: #333;
font-size: 30px;
}
.owl-controls .owl-buttons .owl-next:after {
content: "\f105";
}
@media only screen and (max-width:1280px) {
.post-slide .post-content {
padding: 0px 15px 25px 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="8">
<div id="news-slider" class="carousel-wrap">
<div class="post-slide owl-carousel">
<div class="post-img">
<img class="product__img" src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" alt="{{ product.featured_image.alt }}" />
</div>
<div class="post-img">
<img class="product__img" src="https://i.pinimg.com/originals/e8/c7/c4/e8c7c4d4e14a9e3b21faf3d7b37c5b03.jpg" alt="{{ product.featured_image.alt }}" />
</div>
<div class="post-img">
<img class="product__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSrDI8z4T_iPTd3IzpxW_LPGeUPT3uVXwU4tA&usqp=CAU" alt="{{ product.featured_image.alt }}" />
</div>
<div class="post-img">
<img class="product__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSrDI8z4T_iPTd3IzpxW_LPGeUPT3uVXwU4tA&usqp=CAU" alt="{{ product.featured_image.alt }}" />
</div>
</div>
</div>
</div>