Question

我有两个旋转木马，但是我只希望第二个旋转木马获得样式标签中的css代码。第一个旋转木马不应该得到标签样式。我无法隔离css代码以仅影响第二个轮播。有人能帮助我吗？谢谢!!!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="bootstrap-3.0.2/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.0.2/css/bootstrap.css">
    <style type="text/css">
         .carousel-control           { width:  4%; }
         .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
         .carousel-inner .active.left { left: -25%; }
         .carousel-inner .next        { left:  25%; }
         .carousel-inner .prev       { left: -25%; }
    </style>
</head>
<body>
    <!--first carousel-->
    <div class="container" id="carousel">
        <div id="controlar_carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#controlar_carousel" data-slide-to="0" class="active"></li>
                <li data-target="#controlar_carousel" data-slide-to="1"></li>
                <li data-target="#controlar_carousel" data-slide-to="2"></li>
                <li data-target="#controlar_carousel" data-slide-to="3"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active"><img src="img/1.jpg" alt=""></div>
                <div class="item"><img src="img/2.jpg" alt=""></div>
                <div class="item"><img src="img/3.jpg" alt=""></div>
                <div class="item"><img src="img/4.jpg" alt=""></div>
            </div>  

            <a href="#controlar_carousel" class="left carousel-control" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Anterior</span>
            </a>

            <a href="#controlar_carousel" class="right carousel-control" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Próximo</span>
            </a>
        </div>
    </div>

    <!--second carousel-->
    <div class="col-md-12 text-center"><h3>Product Carousel</h3></div>
    <div class="col-md-6 col-md-offset-3">
        <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
          <div class="carousel-inner">
            <div class="item active">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div>
            </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>

    <script type="text/javascript">
        $('.carousel[data-type="multi"] .item').each(function(){
          var next = $(this).next();
          if (!next.length) {
            next = $(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo($(this));

          for (var i=0;i<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
          }
        });
     </script>
</body>
</html>

Answer 1

让您的旋转木马css样式更加具体：

.product-carousel .carousel-control {
    width: 4%;
}

.product-carousel .carousel-control.left, .carousel-control.right {
    margin-left: 15px;
    background-image: none;
}

.product-carousel .carousel-inner .active.left {
    left: -25%;
}

.product-carousel .carousel-inner .next {
    left: 25%;
}

.product-carousel .carousel-inner .prev {
    left: -25%;
}

在html中，只需添加类.product-carousel作为第二个轮播的父级，但不能作为第一个轮播的父级。像那样：

<!--second carousel-->
<div class="col-md-12 text-center">
    <h3>Product Carousel</h3>
</div>
<div class="col-md-6 col-md-offset-3 product-carousel">
    ...

Answer 2

你有可以用于良好的包装ID：

＆＃13;

#myCarousel .carousel-control {
  width: 4%;
}
#myCarousel .carousel-control.left,
#myCarousel .carousel-control.right {
  margin-left: 15px;
  background-image: none;
}
#myCarousel .carousel-inner .active.left {
  left: -25%;
}
#myCarousel .carousel-inner .next {
  left: 25%;
}
#myCarousel .carousel-inner .prev {
  left: -25%;
}

＆＃13;

特定轮播的样式css代码

2 个答案: