Question

我试图在带有圆角和边框阴影的引导程序中制作幻灯片。然而，旋转木马的左右边缘被切断，我不知道如何解决它。任何帮助表示赞赏。

以下是相关代码：

     <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Some Firm</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <style>
    #slideshow {
        overflow: hidden;
        margin-top:20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
        border-radius: 25px;

    }

    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div>
  <div class="row">
    <div class="col-md-10 col-md-offset-1" id="slideshow">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <center>
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="http://placehold.it/1200x600" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/1200x600" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/1200x600" alt="Flower">
            </div>

            <div class="item">
              <img src="http://placehold.it/1200x600" alt="Flower">
            </div>
          </div>
        </center>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Answer 1

将此添加到您的css

#slideshow { padding:0;border-radius: 25px; }
.carousel img  { border-radius: 25px; }
.carousel-control.left, .carousel-control.right { background:transparent; }

Demo here

Bootstrap，旋转木马切边

1 个答案: