css bootstrap滑块菜单修复

时间：2016-02-13 04:13:45

标签： javascript jquery html css twitter-bootstrap

所以我在这个bootstrap轮播中工作，现在我有这个代码工作，但我需要解决一些问题。

1）使菜单响应。 2）使按钮选择比其他按钮更高。

我尝试了很多，但我还没有找到解决方案，所以我来到这里，也许有人可以帮助我，非常感谢你！

这是图像的一个例子

enter image description here

代码在代码段中。 

$(document).ready(function(ev){
    $('#custom_carousel').on('slide.bs.carousel', function (evt) {
      $('#custom_carousel .controls li.active').removeClass('active');
      $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    })
});
  .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
          width: 100%;
          /*margin: auto;*/
          /*border: 2px solid green;*/
      }
      .carrusel {
          width: 100%;
          height: 40px;
          /*margin: auto;*/
          border: 3px solid red;
          float:right;
          margin: 0px 0px 00px 0px;
          /*background-color: black;*/

      }

      .slide{
        /*border: 2px solid #093845;*/
        width: auto;
      }

      
      /*nav slider*/
      .navi ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          border: 1px solid #e7e7e7;
          background-color: #f3f3f3;
          border: 1px solid red;
          height: 50px;
         
      }

      .navi li {
          float: left;
          border: 1px solid red;
          width: 210px;

      }

      .navi li a {
          display: block;
          color: #666;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }

      .navi li a:hover:not(.active) {
          background-color: #ddd;
          
      }

      .navi li a.active {
          color: white;
          background-color: #4CAF50;
      }
      
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Tabbed Slider Carousel (inspired by sevenx.de) - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        
    
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>

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

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
      </div>                    

    </div>

  </div>
   <!-- Indicators -->      
   <div class="navi">
      <ul class="">      
          <li data-target="#myCarousel" data-slide-to="0" class="boton active"><a href="#">Button 1</a></li>
          <li data-target="#myCarousel" data-slide-to="1" class="boton "><a href="#">Button 1</a></li>
          <li data-target="#myCarousel" data-slide-to="2" class="boton"><a href="#">Button 1</a></li>
          <li data-target="#myCarousel" data-slide-to="3" class="boton"><a href="#">Button 1</a></li>
          <li data-target="#myCarousel" data-slide-to="4" class="boton"><a href="#">Button 1</a></li>  
      </ul>
  </div>




     



</div>





</body>
</html>

3 个答案:

答案 0 :(得分：2)

好的，所以我知道这可能比你要求的要多一些，但我想我会帮忙，让你完全响应你。我留下了旋转木马的标题和标题，以防万一你想将它们用于将来使用，但如果没有，你可以把它们拿出来。因此，我喜欢使用自举旋转木马给旋转木马项目一个百分比的填充底部然后弄乱这个百分比，直到你达到你想要的高度。然后我想给每个项目一个你要放在旋转木马上的图像的背景图像，因为并非所有图像都具有相同的宽高比，否则你会遇到图像偏斜的问题。如果你不想使用背景图像方法，你可以使用你的方法，但我想我会把它扔在那里，因为它最适合响应式设计。所以我给每个旋转木马项目一个例如。第一项，第二项，第三项等，然后给出所有幻灯片图像的所有backgorund图像。然后我们将把你的导航放在旋转木马下面和你的全套。此外，您还需要将data-interval="false"添加到您的#myCarousel div中，因为当您点击其中一张幻灯片时，它会开始循环播放幻灯片，您的活动标签仍然会显示在您点击的标签上。在轮播处于自动间隔时删除活动类是一组完全不同的jquery标记。此外，我将您的轮播导航按钮设置为20％，因为其中有5个。如果你想要它们是不同的百分比，那么添加一个媒体查询，使它们更像大小，你也必须改变轮播导航高度，也可能没有更大的活动按钮apear：

@media screen and (max-width: 767px){
  .carousel-nav li{width: 100%;)
}

这是一个有效的小提琴演示Fiddle

所以这是标记：

Html：

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="item active first-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 1</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item second-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 2</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item third-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 3</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item fourth-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 4</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
    <div class="item fifth-item">
      <div class="container">
        <div class="carousel-caption">
          <p class="carousel-heading">Example Heading 5</p>
          <p class="carousel-description">Example of a Carousel Description</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
        </div>
      </div>
    </div>
  </div>
</div><!-- /.carousel -->


<ul class="carousel-nav">
  <li class="active" data-target="#myCarousel" data-slide-to="0"><button>Button 1</button></li>
  <li data-target="#myCarousel" data-slide-to="1"><button>Button 2</button></li>
  <li data-target="#myCarousel" data-slide-to="2"><button>Button 3</button></li>
  <li data-target="#myCarousel" data-slide-to="3"><button>Button 4</button></li>
  <li data-target="#myCarousel" data-slide-to="4"><button>Button 5</button></li>
</ul>

Css：

#myCarousel .item{
  padding-bottom: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 250px;
}
#myCarousel .first-item{
  background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .second-item{
  background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .third-item{
  background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fourth-item{
  background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fifth-item{
  background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .carousel-heading{font-size: 40px;}

.carousel-nav{
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 50px;
}
.carousel-nav li{
  height: 100%;
  width: 20%;
  float: left;
}
.carousel-nav li button,.carousel-nav li button:focus{
  height: 100%;
  border: 1px solid red;
  width: 100%;
  position: relative;
  z-index: 2;
  outline: 0;
}
.carousel-nav li.active button, .carousel-nav.active li button:focus{
  height: 60px;
  margin-top: -10px;
  outline: 0;
}
/*Responsive Styles*/
@media screen and (max-width: 767px){
    #myCarousel .carousel-heading{font-size: 18px;}
    #myCarousel .carousel-description{font-size: 12px;}
    #myCarousel .btn-primary{font-size: 14px;}
}

你的jquery：

注意：这可能要求您使用较新版本的jquery，因此您可能希望在头部添加此而不是1.11 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

然后是jquery代码：

$(document).on('click', '.carousel-nav button', function() {
    $('.carousel-nav li').removeClass('active');
    $(this).parent().addClass('active');        
});

答案 1 :(得分：1)

在班级中将高度更改为自动＆＃34; .navi ul＆＃34;所以就像

.navi ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  border: 1px solid red;
  height: auto;         
}

在＆＃34; .navi li＆＃34;中将按钮的宽度更改为20％所以它就像

.navi li {
  float: left;
  border: 1px solid red;
  width: 20%;
}

并为所选按钮添加一个类

.navi li.active a {
  background-color: white;
  border: 1px solid green;
  height: 11%;
  margin: -15px 0 0 -2px;
  position: absolute;
  width: 19%;
}

答案 2 :(得分：1)

首先要注意的是，您提到的JavaScript并不能按照您的标记工作。具体来说，幻灯片移动时，您的活动类不会动态更改。我修改了JS代码以使其工作。

$(document).ready(function(ev){
    $('#myCarousel').on('slide.bs.carousel', function (evt) {
      $('.navi li.active').removeClass('active');
      $('.navi li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    })
});

你的CSS也有一个小错误。 active类已应用于<li>代码，而不是<a>，因此有效代码应更改为

  .navi li.active {
      background: blue;
      color: white;
  }

而不是.navi li a.active。

要在激活时缩放按钮，您可以使用transform: scale()。像这样

  .navi li.active {
      background: blue;
      color: white;
      -ms-transform: scale(1.1); /* IE 9 */
      -webkit-transform: scale(1.1); /* Safari */
      transform: scale(1.1);
  }
相关问题
最新问题