【发布时间】：2018-03-16 20:20:16
【问题描述】：
我试图实现这段代码： https://bootsnipp.com/snippets/featured/tabbed-slider-carousel
唯一的区别：我正在使用这些导入：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
这是我的代码：
html
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div><!-- End Carousel -->
</div>
js:
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
css:
body { padding-top: 20px; }
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
请看一下这个 jsfiddle 中的结果：https://jsfiddle.net/2ku1jhk9/1/
你可以看到，它不知何故不起作用。但是我的控制台中没有任何错误。所以我一无所知。
有谁知道为什么它不适用于 bootstrap 4 以及我需要更改什么？
【问题讨论】：
-
您遗漏了一些 HTML，尝试将原始 HTML 粘贴到那里，它看起来仍然有些不稳定，但没有什么太难修复的问题，并且可以正常工作。编辑：这是链接jsfiddle.net/2ku1jhk9/3
-
@Maharkus 现在你刚刚导入了 boostrap 3 :D 我知道它正在使用它。我的整个问题是如何使用 bootstrap 4 运行它
-
我没有意识到 sn-p 是在 Bootstrap3 中制作的，我很糟糕哈哈。但是，那时您唯一要更改的是 HTML，这意味着从技术上讲它仍然是 Bootstrap 4。
-
@Maharkus 我不知道你想说什么。
-
Bootstrap4 有不同的实现，如更改类名等。w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel
标签： jquery html css twitter-bootstrap bootstrap-4