引导项目滑块动画如示例

问题描述

我有一个带有 bootstrap 的项目滑块（有些人称其为gallery滑块），并且我已尽其所能对其进行了自定义。
另外在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>

这就是我所做的一切。这就是我想要实现的目标：

• 滑动动画（向左滑动时放大）
• 垂直指示器（如屏幕左侧的示例）
  
  

如果您能帮助我，我将不胜感激。
谢谢♥

解决方法

我添加了默认的轮播指示器，并使其垂直对齐

$('#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：我的位置不正确。希望对您有帮助