时间戳

首页 > 解决方案 > Bootstrap 4轮播布局问题

javascript - Bootstrap 4轮播布局问题

问题描述

我正在尝试使旋转木马工作。有很多问题，样本，答案，但最后，我被困住了。这是我的页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Animated Text Carousel</title>

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/animate.min.css" rel="stylesheet">
        <script src="js/jquery-3.6.0.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>

        <!-- THIS IS THE IMAGE ARRAY -->
        <!-- script src="Immagini/imagelist.js" type="text/javascript" charset="utf-8" async defer></script -->

        <script>
            $(function() {

                // THIS IS HOW THE IMAGE ARE LISTED IN THE ARRAY
                var images = [
                    'https://via.placeholder.com/150x75/?text=image1',
                    'https://via.placeholder.com/150x75/?text=image2',
                    'https://via.placeholder.com/150x75/?text=image3',
                    'https://via.placeholder.com/150x75/?text=image4',
                    'https://via.placeholder.com/150x75/?text=image5',
                    'https://via.placeholder.com/150x75/?text=image6',
                    'https://via.placeholder.com/150x75/?text=image7',
                    'https://via.placeholder.com/150x75/?text=image8',
                    'https://via.placeholder.com/150x75/?text=image9'
                ];

                var CarouselItemHtml = 
                    '   <div class="carousel-item$activeclass$">'+
                    '       <div class="fill" style=" background-color:#448;">'+
                    '           <div class="inner-content">'+

                    '               <div class="col-sm-3">'+
                    '                   <div class="carousel-img">'+
                    '                       <img src="$imagepath$" alt="$imagepath$" class="img img-responsive" />'+
                    '                   </div>'+
                    '               </div>'+
                    '               <div class="col-sm text-left">'+
                    '                   <div class="carousel-caption">'+
                    '                       <h2 class="text-primary">Immagine numero $imageindex$</h2>'+
                    '                       <h3 class="animate__animated animate__bounceInLeft" style="animation-delay: 1s">$imagepath$</h3>'+
                    '                       <p  class="animate__animated animate__bounceInRight" style="animation-delay: 0.5s">Descrizione dell\'immagine $imageindex$</p>'+
                    '                   </div>'+
                    '               </div>'+

                    '           </div>'+
                    '       </div>'+
                    '   </div>'
                ;

                var ImgSlider = $("#ImageSlider")
                let indicators = ImgSlider.find('.carousel-indicators');
                let carousel = ImgSlider.find('.carousel-inner')
                images.forEach((e,i)=>{
                    var activeclass = i == 0 ? " active":"";

                    indicators.append(
                        '<li data-target="#ImageSlider" data-slide-to="'+i+'" class="'+activeclass+'"></li>'
                    );
                    carousel.append(
                        CarouselItemHtml
                        .replace('$activeclass$', activeclass)
                        .replace('$imageindex$', i)
                        .replace('$imagepath$', e)
                    );
                });



            });
        </script>

        <style>
            html, body{
                width:100%;
                height:100%;
                background-color:#200;
            }
            .carousel {
                height:70%; width:100%; // Puts the indicators full down
                border:3px solid #006; 
                background-color:#224;
            }
            .carousel-inner {
                border:3px solid #060; 
            }
            .container, .fill {
                border:3px solid #600; 
            }
            .carousel-inner, .carousel-item, .container, .fill {
                border:3px solid #060; 
            }
            .carousel-inner, .carousel-item, .container, .fill {
                height:100%; width:100%; // Puts the indicators full down
            }
            .slide-wrapper{display:inline;}
            .slide-wrapper .container{padding:0px;}

            .carousel-indicators li{
                display:block; 
                border:2px solid #0a9; 
            }
            .carousel-indicators li.active{
                background:#0a9;
            }

            .carousel-item, {
                display: inline-block;
                border:3px solid #FF0; 
                height:100%; 
                width:100%;
                background-color:#363;
            }
            .carousel-img{   
                display: inline-block;
                border:3px solid #F0F; 
                width: 100%;
                text-align: center;
                background-color:#336;
            }

            .carousel-caption{
                text-align: left;
                border:3px solid #0FF; 
                background-color:#242;
            }
        </style>

    </head>

    <body>
        <section class="slide-wrapper">
            <div class="container" id="MainContainer">
                <div id="ImageSlider" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators"></ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox"></div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#ImageSlider" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#ImageSlider" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div> <!-- MainContainer -->
        </section>
    </body> 
</html>

我的代码在 codepen可见。该页面是一个本地页面，需要加载并显示 .js 文件中列出的所有图像；这就是为什么脚本和整个轮播都是这样制作的。

我的问题是我无法：

另外，我不确定如何将指示器保持在幻灯片下方（在 CSS 中）。我希望它只停留在滑块下方，无论它的高度是多少。

丑陋的颜色反映了我努力寻找各种元素的去向，但我两天后就被困在这里了。

我应该怎么办？

标签： javascripthtmlcssbootstrap-4

解决方案

推荐阅读