Привет всем. Я пытаюсь показать один за другим продукт в центре. У меня есть этот слайд, чтобы показать продукты в карточках, поэтому мне нужно показать в центре, который я останавливаюсь в данный момент. Я использую гладкий javascript-lib. Так что я не обладаю этим свойством. Пожалуйста, я хотел бы что-то помочь достичь этого. Спасибо всем за любую помощь.
<!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>