javascript - 引导项目滑块动画，如示例
问题描述
我有一个带有bootstrap的项目滑块（有些人称之为画廊滑块），并且我已经尽可能地对其进行了定制。
在 Dribbble 中还有一个非常酷的 Slider 示例视频，我正在尝试制作这样的滑块……这是示例的链接：THE COOL SAMPLE
现在这是我的代码（全屏观看）：
$('#recipeCarousel').carousel({
interval: 2000
})
$('.carousel .carousel-item').each(function () {
var minPerSlide = 1, next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
}); @media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
@media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carousel-inner {
position: absolute;
top: 0;
right: 0;
}
.carousel-indicators {
position: relative;
}
.carousel-indicators .caption-item.active {
display: block;
}
.carousel-indicators .caption-item {
padding: 0 !important;
margin: 0 !important;
display: none;
width: 200px !important;
}
.carousel-item div img {
width: 100%;
height: 320px;
object-fit: cover;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="recipeCarousel" class="carousel slide container" data-ride="carousel">
<div class="row">
<div class="col-4 m-0">
<div class="carousel-captions carousel-indicators">
<div class="caption-item active" data-target="#recipeCarousel" data-slide-to="0">
<h1>Title One</h1>
<p>Description one</p>
</div>
<div class="caption-item" data-target="#recipeCarousel" data-slide-to="1">
<h1>Title Two</h1>
<p>Description Two</p>
</div>
<div class="caption-item" data-target="#recipeCarousel" data-slide-to="2">
<h1>Title Three</h1>
<p>Description Three</p>
</div>
<div class="caption-item" data-target="#recipeCarousel" data-slide-to="3">
<h1>Title Four</h1>
<p>Description Four</p>
</div>
</div>
</div>
<div class="col-8 m-0">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1542317148-8b4bdccb33ea?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1541936879-c80db20ab951?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>这就是我所做的。这就是我想要实现的目标：
- 滑动动画（向左滑动时放大）
- 垂直指示器（如屏幕左侧的示例）
如果你能帮助我，我将不胜感激。
谢谢♥</p>
解决方案
我添加了一个默认的轮播指示器并让它们垂直对齐
$('#recipeCarousel').carousel({
interval: 2000
})
$('.carousel .carousel-item').each(function () {
var minPerSlide = 1, next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});@media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
@media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carousel-inner {
position: absolute;
top: 0;
right: 0;
}
.carousel-indicators {
position: relative;
}
.carousel-indicators .caption-item.active {
display: block;
}
.carousel-indicators .caption-item {
padding: 0 !important;
margin: 0 !important;
display: none;
width: 200px !important;
}
.carousel-item div img {
width: 100%;
height: 320px;
object-fit: cover;
}
.carousel-indicators {
display:flex !important;
flex-direction:column !important;
}
.carousel-indicators li{
background-color:SlateBlue !important;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="recipeCarousel" class="carousel slide container" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#recipeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#recipeCarousel" data-slide-to="1"></li>
<li data-target="#recipeCarousel" data-slide-to="2"></li>
<li data-target="#recipeCarousel" data-slide-to="3"></li>
</ul>
<div class="row">
<div class="col-4 m-0">
<div class="carousel-captions carousel-indicators">
<div class="caption-item active" data-target="#recipeCarousel" data-slide-to="0">
<h1>Title One</h1>
<p>Description one</p>
</div>
<div class="caption-item" data-target="#recipeCarousel" data-slide-to="1">
<h1>Title Two</h1>
<p>Description Two</p>
</div>
<div class="caption-item" data-target="#recipeCarousel" data-slide-to="2">
<h1>Title Three</h1>
<p>Description Three</p>
</div>
<div class="caption-item" data-target="#recipeCarousel" data-slide-to="3">
<h1>Title Four</h1>
<p>Description Four</p>
</div>
</div>
</div>
<div class="col-8 m-0">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1542317148-8b4bdccb33ea?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1541936879-c80db20ab951?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="slider-suggestion-item">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1439853949127-fa647821eba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
<button class="circled-btn btn btn-sm btn-full-radius white-color-bg">
<i class="far fa-bookmark fa-stack"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>PS：我没有正确定位它。希望对你有帮助
推荐阅读
- python - Python中的Ctypes实现
- java - 对集合中选定项目的操作
- python-3.x - Python：如果文件不以 " 结尾，则向上移动下面的行
- wcf - WCF 服务 - 证书未到达服务器
- node.js - Bot Framework 机器人在模拟器中工作，但在部署的机器人上获得 Microsoft.Bot.ChannelConnector.BotAPI.ThrowOnFailedStatusCode
- android - Android运营商应用e-sim激活码使用
- objective-c - 无法将 view.tag ObjC 代码转换为 Swift
- python - 检查 URL 是否有效/存在的最有效方法是什么？
- c# - C# Google Sheets API 获取某个值的行
- java - okhttp 连接线程太多