Question

我试图在boostrap 4的旋转木马中做两件事

1- img文本中的阴影，在旋转木马标题中使用文本下方的暗效果

2-循环格式的指标和

中的数字

这两件事就像这个IMG： https://i.imgur.com/gH9TGQ0.png

我试过这个：

<script>
/* shadow */
.carousel-caption {
  background: rgba(0,0,0,0.5);
  background-color: rgba(0,0,0,.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* circle indicators and numbers */
.carousel-indicators-numbers {
    li {
      text-indent: 0;
      margin: 0 2px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 100%;
      line-height: 30px;
      color: #fff;
      background-color: #999;
      transition: all 0.25s ease;
      &.active, &:hover {
        margin: 0 2px;
        width: 30px;
        height: 30px;
        background-color: #337ab7;        
      }
    }
}
</script>


<!-- carrousel NEWS -->
<div class="col-md-9" style="height:550px; width: 900px;">

<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <!-- indicators dot nov -->
  <ol class="carousel-indicators carousel-indicators-numbers">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
  </ol>

  <!-- wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 1</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 2</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 3</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
  </div>

  <!-- controls or next and prev buttons -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

</div>

但是没有效果，它只是显示默认的boostrap轮播： https://i.imgur.com/xcLAPk1.png

Answer 1

    <style>.carousel-caption {
        background: rgba(0, 0, 0, 0.35);
        width: 100%;
        left: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 5px;
        padding-right: 5px;
        bottom: 0;
    }
    .carousel-indicators{
        top:15px
    }
    .carousel-indicators li{
        text-indent: 0;
        margin: 0 2px;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 100%;
        line-height: 30px;
        color: #fff;
        background-color: #999;
        transition: all 0.25s ease;
        padding-left: 10px;
        padding-top: -1px;
    }
    .carousel-indicators li.active, .carousel-indicators li li:hover {
        margin: 0 2px;
        width: 30px;
        height: 30px;
        background-color: #337ab7;
    }</style>



  <div id="demo" class="carousel slide" data-ride="carousel">
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active">1</li>
            <li data-target="#demo" data-slide-to="1" class="">2</li>
            <li data-target="#demo" data-slide-to="2" class="">3</li>
        </ul>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://placehold.it/1200x500" alt="...">  <div class="carousel-caption d-block text-center">
                    <h3>news 1</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                 </div>

            </div>
            <div class="carousel-item">
                <img src="http://placehold.it/1200x500" alt="...">        <div class="carousel-caption d-block text-center">
                    <h3>news 2</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>   </div>

            </div>
            <div class="carousel-item">
                <img src="http://placehold.it/1200x500" alt="...">      <div class="carousel-caption d-block text-center">
                    <h3>news 3</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>      </div>

            </div>


        </div>
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>

Answer 2

您已将css代码包装在脚本标记更改内。应该选择.carousel-indicators-numbers > li这样的li和li，并等待5秒钟才能看到对1号的影响。我不知道为什么它显示错误

对于完全相同的输出，我使用了0.3不透明度

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- carrousel NEWS -->
<div class="col-md-9" style="height:550px; width: 900px;">

<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <!-- indicators dot nov -->
  <ol class="carousel-indicators carousel-indicators-numbers">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
  </ol>

  <!-- wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 1</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 2</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 3</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
  </div>

  <!-- controls or next and prev buttons -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* shadow */

.carousel-caption {
  background: rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,.3);
  text-shadow: 0 1px 4px rgba(0, 2, 0, 0.85);
}

/* circle indicators and numbers */
.carousel-indicators-numbers li {
      text-indent: 0;
      margin: 0 2px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 100%;
      line-height: 30px;
      color: #fff;
      background-color: #999;
      transition: all 0.25s ease;
      &.active, &:hover {
        margin: 0 2px;
        width: 30px;
        height: 30px;
        background-color: #337ab7;        
      }
    
}
</style>

阴影和圆圈号旋转木马Boostrap 4

2 个答案: