錨標簽打破了旋轉木馬滑塊-Bootstrap 4
[英]Anchor tags are breaking carousel slider - Bootstrap 4
問題描述
希望有人可以在這里幫助我。
與Bootstrap 4傳送帶混為一談，我發現，如果幻燈片的內容在某處有錨標記，則該旋轉帶不會進入該幻燈片。 我想保留一個按鈕鏈接到幻燈片上站點其他部分的設計，但是如果輪播不會滑動到該按鈕，我不知道如何實現。
我進行了廣泛的故障排除，這肯定是導致此問題的標簽，因為相同的代碼減去按鈕周圍的定位標簽效果很好。
謝謝您的幫助。
代碼如下：
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
2 個解決方案
解決方案1
0 2018-08-13 11:36:41
我更改代碼，
顯然，您可以在bootstarp滑塊中添加錨標記，我只需刪除按鈕並在錨標記中添加類，然后完成即可。
- 您錯過了關閉錨標簽的操作。
- 永遠不要將按鈕用作錨標記的子代
代碼如下：
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<a href="add link to other parts of the site" class="btn btn-secondary text-right">Find out more</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
解決方案2
0 2018-08-13 12:22:45
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <title>SW Events - Tasting Menus</title> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <div class="container" id="tastingCar"> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Whisky Tastings</h3> <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br> Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p> <div class="menuBook align-items-center"> <!-- Anchor tag won't allow carousel to slide --> <a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a> </div> </div> </div> <div class="carousel-item"> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Gin Tastings</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p> </div> </div> <div class="carousel-item text-left "> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Private Tastings</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p> </div> </div> <div class="carousel-item text-left "> <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550"> <div class="carousel-caption text-left"> <h3>Whisky Tastings</h3> <p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br> Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p> <div class="menuBook align-items-center"> <!-- Anchor tag won't allow carousel to slide --> <a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a> </div> </div> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tastingTitle").fadeIn(750, function() { $("#tastingCar").fadeIn(1000, function() { $("#weddingSub").fadeIn(1250); }); }); }); var myFunc = $(document).ready(function(){ $("#bookWedding").click(function () { $("#chateauLogo").fadeOut(500); $("#weddingSub").fadeOut(500); $("#inAssoc").fadeOut(500); $("#bookWedding").fadeOut(500, function () { $("#weddingForm").fadeIn(500); }); }); }); $(function () { $( "#datepicker" ).datepicker(); } ); $('.carousel').carousel({ interval: false }); </script> </div> </body>
嘗試這個
引導輪播會阻止錨標簽工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.