css引导滑块菜单修复

-1

所以我在这个引导轮播，现在我有这个代码工作，但我需要解决一些问题。css引导滑块菜单修复

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

我尝试了很多thigs，但我还没有找到解决办法，所以我来到了这里，也许有人可以帮助我，太感谢你了！

这是图像为例

的代码在代码段。

$(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>

来源

2016-02-13 bjesua

好吧，所以我知道这可能比你要求的多一点，但我想我会帮忙，并使这个完全响应你。我留下了旋转木马的标题和标题，以防万一您想将它们用于将来使用，但如果不是，您可以将它们取出。所以我喜欢用引导转盘给旋转木马项目一个百分比的填充底部，然后混淆这个百分比，直到你达到你想要的高度。然后，我只想给每个项目分配一个图像的背景图像，因为不是所有图像都具有相同的高宽比，否则会遇到图像偏斜的问题。如果你不想使用背景图像方法，你可以使用你的方法，但我想我会把它放在那里，因为它适用于响应式设计。所以我给每个旋转木马项目一类例如。第一个项目，第二个项目，第三个项目等等，然后给出所有幻灯片图像所有的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的新版本，所以你可能想在你的脑袋

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

则添加，而不是1.11本jQuery的代码：

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

来源

2016-02-13 06:53:56

哇!!!! ...这是令人难以置信的，我知道我的知识是非常有限的，我甚至不能想到你解决这个问题的方式......简单难以置信！非常感谢你，时间来解决和解释你如何解决这个问题，我再次感谢你，我真的很高兴，我会检查代码的每一行哟写，并尝试理解！ – bjesua

如果您有任何问题可以随时发表评论，那么完全没问题，我会尽快与您联系。此外，如果这回答了这个问题，请考虑在您启动并运行所有内容时单击答案旁边的复选标记。快乐编码:) –

哇，你真棒，非常感谢你！ – bjesua

变化高度自动在类 “.navi UL”，因此它会像

.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;   
}

按钮的变化宽度至20％在 “.navi丽”类，所以它会像

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

并为selec添加一个类ted按钮

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

来源

2016-02-13 05:33:59 PHPExpert

非常感谢你 – bjesua

最欢迎:)。接受回答并作出回复 – PHPExpert

要注意的第一件重要的事情是，您提到的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; 
    }

和NOT .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); 
    }

来源

2016-02-13 05:53:59

非常感谢你！ – bjesua

css引导滑块菜单修复

回答

相关问题