小贝子编程

Slick Slider不适用于Bootstrap Tab



我想用光滑的滑块滑动图像。我使用了引导选项卡菜单，每个选项卡都必须正确显示一个光滑的滑块。但我有个问题。第一个选项卡内容显示光滑的滑块没有任何问题，但当我单击第二个选项卡时，它只显示一个图像。它不能正常工作。如何解决此问题？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Focus Education</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<style>
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
padding: 15px;
background-color: #35bb60;
}

div.your-class {
opacity: 1;
}

.nav-tabs .nav-link {
color: #fff;
}

.wrap-modal-slider {
padding: 0 30px;
opacity: 0;
transition: all 0.3s;
}

.wrap-modal-slider.open {
opacity: 1;
}

.your-class {
width: 726px;
margin: 0 auto;
position: relative;
}
/* Arrows */

.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}

.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-prev {
left: -25px;
}

[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}

.slick-prev:before {
content: '←';
}

[dir='rtl'] .slick-prev:before {
content: '→';
}

.slick-next {
right: -25px;
}

[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}

.slick-next:before {
content: '→';
}

[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */

.slick-dotted.slick-slider {
margin-bottom: 30px;
}

.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}

.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}

.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}

.slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
</style>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">New</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Recommend</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="your-class">
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="your-class">
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="your-class">
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('.your-class').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$('.your-class').slick('setPosition');
})
</script>
</html>

所以我的第一印象是似乎有点"太多"；继续。我浏览并简化了一些事情。导致它不能按预期工作的两个最大问题是，您需要在每个tab-pane类中包含active。仅将CCD_ 3包括在"；新的"；选项卡，因为这是您要在加载时显示的。

简化JS~

$(document).ready(function() {
$('.your-class').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});

请在此处查看实际操作~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Focus Education</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<style>
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
padding: 15px;
background-color: #35bb60;
}

div.your-class {
opacity: 1;
}

.nav-tabs .nav-link {
color: #fff;
}

.wrap-modal-slider {
padding: 0 30px;
opacity: 0;
transition: all 0.3s;
}

.wrap-modal-slider.open {
opacity: 1;
}

.your-class {
width: 726px;
margin: 0 auto;
position: relative;
}
/* Arrows */

.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}

.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-prev {
left: -25px;
}

[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}

.slick-prev:before {
content: '←';
}

[dir='rtl'] .slick-prev:before {
content: '→';
}

.slick-next {
right: -25px;
}

[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}

.slick-next:before {
content: '→';
}

[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */

.slick-dotted.slick-slider {
margin-bottom: 30px;
}

.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}

.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}

.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}

.slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
</style>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">New</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Recommend</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="your-class">
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>
</div>
<div class="tab-pane fade active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="your-class">
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>
</div>
<div class="tab-pane fade active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="your-class">
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
<div><img src="http://via.placeholder.com/242x300" alt=""></div>
<div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('.your-class').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium