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引導滑塊菜單修復

回答

相關問題