I have implemented two sliders within the Bootstrap Tabs component. The sliders are functioning properly for the active tab but encounter issues when switching tabs. You can view the problem here: https://codepen.io/cray_code/pen/PxwdvQ
Is there a solution to prevent this behavior?
Below is the HTML code:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="games-tab" data-toggle="tab" href="#games" role="tab" aria-controls="games" aria-selected="true">Games</a></li>
<li class="nav-item"><a class="nav-link " id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies" aria-selected="false">Movies</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="games" role="tabpanel" aria-labelledby="games-tab">
<div class="slider-games">
<div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="tab-pane " id="movies" role="tabpanel" aria-labelledby="movies-tab">
<div class="slider-movies">
<div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline</h1>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
And here's the JavaScript code:
$('.slider-games').slick({
dots: false,
arrows: true,
slidesToShow: 2,
});
$('.slider-movies').slick({
dots: false,
arrows: true,
slidesToShow: 2,
});