When integrating the slick slider with Bootstrap5 Nav, I encountered an issue where the slider does not display within the active tab content unless the window is resized. Rearranging the sequence of embedded JavaScript did not solve the problem and actually caused the slider to break.
The slider works fine with pure text but encounters issues with the slick slider. This appears to be related to the JavaScript used by Bootstrap and Slick.
If you want to check out the code, here is the link: https://codepen.io/HarperJ/pen/XWqrBem
Appreciate any help in advance.
HTML:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button" role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab" aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='...' alt=''>
<img src='...' alt=''>
<img src='...' alt=''>
<img src='...' alt=''>
</div>
<div class="slider slider-nav">
<img src='...' alt=''>
<img src='...' alt=''>
<img src='...' alt=''>
<img src='...' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='...' alt=''>
<img src='...' alt=''>
</div>
<div class="slider slider-nav2">
<img src='...' alt=''>
<img src='...' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active{
color: #343434;
border-bottom: 1px solid #343434;
}
JS:
$(document).ready(function(){
// Slider for Tab 1
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
// Slider for Tab 2
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav2'
});
$('.slider-nav2').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for2',
dots: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
})