Question

我是Bootstrap的新手，我需要一些帮助来制作此自定义轮播。下面的图片将完美地说明我正在尝试做的事情！谢谢！

Answer 1

这是我使用JQuery的解决方案。确保将每个图像的src属性更新为适当的值。我已经提供了这篇文章底部使用的大多数重要方法的链接。

<html>

<head>
    <title>Custom Carousel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CDNs -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script>
    $(document).ready(function(){
        // lg breakpoint that bootstrap defines is at 992px width
        // Look at the Bootstrap Responsive Breakpoints page for more info
        if($(window).width() <= 992)
            // Look at JQuery Starts-With-Selector and Remove Documentation for more info
            $("div[id^='3-slides-']").remove(); 
        else
            $("div[id^='slide-']").remove();
    });
    </script>

</head>

<body>
    <div id="custom-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <!-- First 3 slides -->
            <div class="carousel-item active" id="3-slides-1">
                <div class="container-fluid">
                    <!-- Check out Bootstrap Grid Documentation for info about rows/cols -->
                    <div class="row align-items-center">
                        <img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
                        <img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
                        <img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>

            <div class="carousel-item active" id="slide-1">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <div class="carousel-item" id="slide-2">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <div class="carousel-item" id="slide-3">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <!-- Second 3 slides -->
            <div class="carousel-item" id="3-slides-2">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
                        <img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
                        <img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>

            <div class="carousel-item" id="slide-4">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <div class="carousel-item" id="slide-5">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <div class="carousel-item" id="slide-6">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <!-- Third 3 slides -->
            <div class="carousel-item" id="3-slides-3">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
                        <img class="col-lg-6" src="https://via.placeholder.com/940x600"/>
                        <img class="col-lg-3" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>

            <div class="carousel-item" id="slide-7">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <div class="carousel-item" id="slide-8">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>
            <div class="carousel-item" id="slide-9">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <img class="col-12" src="https://via.placeholder.com/940x600"/>
                    </div>
                </div>
            </div>

            <!-- Carousel controls -->
            <a class="carousel-control-prev" href="#custom-carousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#custom-carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</body>

CodePen

这没有响应。 如果将窗口的大小调整为移动视图的大小，则不会调用JQuery函数。但是，如果屏幕以移动尺寸开头，则轮播会合适。

如果您需要在调整大小期间将轮播更新到正确的视图，我相信您可以在窗口周围使用我使用过的主要JQuery函数包装一个调整大小的函数。例如

$(window).resize(function() {
if( $(this).width() > width ) {
    if($(window).width() <= 992)
        ...
    else
        ...
}

Bootstrap 4定制轮播

1 个答案:

有用链接