大家好，我想在中心展示一件一件的产品。我有这张幻灯片来展示卡片中的产品，所以我需要在我停留的中心展示。我正在使用光滑的 javascript-lib。所以我没有那样做的属性(property)。请我想帮助实现这一点。感谢大家的帮助。
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 80%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 80%;
height: 50%;
padding: 20px;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.card {
width: 350px;
}
</style> </head>
<body>
<main>
<div class="container">
<div class="row">
<section class="regular slider">
<div class="card">
<img class="card-img"
src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/vans.png"
alt="Vans">
<div class="card-img-overlay d-flex justify-content-end">
<a href="#" class="card-link text-danger like">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Vans Sk8-Hi MTE Shoes</h5>
<h6 class="card-subtitle mb-2 text-muted">Style: VA33TXRJ5</h6>
<p class="card-text">
The Vans All-Weather MTE Collection features footwear and apparel designed to withstand
the elements whilst still looking cool. </p>
<div class="buy d-flex justify-content-between align-items-center">
<div class="price text-success">
<h5 class="mt-4">$125</h5>
</div>
<a href="#" class="btn btn-danger mt-3"><i class="fas fa-shopping-cart"></i> Add to
Cart</a>
</div>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top"
src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/vans.png"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</section>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/popper.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script>
$(document).on('ready', function () {
$(".regular").slick({
centerPadding: '60px',
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
variableWidth: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script> </body>
</html>
最佳答案
自己的demos page of the slick plugin正是您想要的，以及概念的许多变体，以及实现它的代码片段。更重要的是，如果我对你的理解是正确的，那么你想要的是默认行为。您是否从某处复制了您的代码段？我可能是错的，但在您的配置对象中，您只需要删除 slidesToShow 属性，或将其设置为一张，或者如果您想显示多张幻灯片，但只需将当前幻灯片居中，你可以设置 centerMode: true。
关于javascript - 圆滑的显示一个在中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58422069/