Question

我处理了引导传送带滑块，并更改了一些代码，但现在滑块无法正常工作。它在一开始就可以正常工作，当我将代码放入CSS时，它就停止了。

只想滑动图片和文字。文本的位置不一样，因为我更改了一些引导代码，但这是原始的引导程序，没关系。

.carousel-caption {
  top: 0 !important;
  left: 0 !important;
  width: 45%;
  max-width: 100vw;
  padding: 0 15%;
}

.carousel-caption .lead {
  text-align: left;
  position: absolute;
  top: 30vh;
  left:8vw;
  font-size: 30px;
  
}

.slide1-title {
  font-size: 45px;
} 

.btn-style-one {
  position: relative;
  padding: 14px 30px;
  line-height: 1em;
  background: #221f1f;
  margin-top: 20px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid transparent !important;
}

@media(max-width: 1300px){
  .slide1-title{
    font-size: 30px;
  }
 }

 @media(max-width: 1000px){
  .slide1-title{
    font-size: 25px;
  }
 }


@media(max-width: 768px){
 .carousel-caption .lead{
   font-size: 15px;
 }
 .slide1-title{
  font-size: 22px;
}

  .btn-style-one{
    position: relative;
    padding: 10px 25px;
    line-height: 1em;
    background: #221f1f;
    margin-top: 20px;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    border: 2px solid transparent !important;
}

}


@media(max-width: 500px){
  .carousel-caption {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    max-width: 100vw;
    padding: 0 15%;
  }
  .carousel-caption .lead {
    text-align: center;
    position: absolute;
    top: 35vh;
    left:0vw;
  }
  .carousel-caption .lead{
    font-size: 20px;
  }
  .slide1-title{
   font-size: 25px;
 }

}
.red {
  color:red;
  
}

.bgcarousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
  stroke-width: 1;
}

.services-icon {
  margin-bottom: 20px;
  font-size: 30px;
}
bgc2, .vLine, .hLine {
    background-color: #0F52BA;
}

.quote-icon {
  font-size: 40px;
  margin-bottom: 20px;
}
.services-icon {
    font-size: 60px;
    margin-left: 2rem;
}

    
    .slide1-content{
      font-size:18px;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <!-- Slide One - Set the background image for this slide in the line below -->
                        <div class="bgcarousel-item active" style="background-image: url('https://wallpaperplay.com/walls/full/6/9/8/60291.jpg')">
                            <div class="carousel-caption d-lg-block slide1-bg">                
                                <p class="lead slide1 slide1-content"><span class="slide1-title" style="text-transform: uppercase; font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span><br><br>
                                <i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </i><br>
                                <a href="#o-nama" class="btn btn-dark btn-style-one scroll-to-target" data-target="#o-nama">Button</a>
                            </div>
                        </div>  
                        <!-- Slide Two - Set the background image for this slide in the line below -->
                        <div class="carousel-item" style="background-image: url('http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.jpg')">
                            <div class="carousel-caption d-md-block">
                              <h2 class="display-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
                              <i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </i>
                            </div>
                          </div>
                        </div>                                                         
                    </div>  

                </div>

Answer 1

您用carousel-item覆盖了引导轮播默认类 bgcarousel-item。只需在第一张幻灯片中添加carousel-item类，即可解决您的问题。谢谢

<div class="bgcarousel-item carousel-item active" style="background-image: url('https://wallpaperplay.com/walls/full/6/9/8/60291.jpg')">

Bootstrap传送带滑块无法正常工作

1 个答案: