问题
I'm using multiple slick sliders inside a Bootstrap 4 tab navigation.
After a great answer from Rory McCrossan (https://stackoverflow.com/a/48400449/1788961), the slider works well inside an hidden container.
But I need it to work in combination with two tab content areas.
If I'm using two content areas, the slider breaks again. I guess it has something to do with the line .first().trigger('shown.bs.tab'); and the argument .first?!
The next problem is, that the sync between the sliders doesn't work. In the first example, the sync works fine. In the second example with two content areas it doesn't work. Is it because of the Divs around the two sliders or is it because of the selection of the active tabs/sliders?
Strangely, the sync works on my site (not JSFiddle) if I navigate with the dots in the first slider of the second example. If I use the arrows of the second slider, it doesn't work?!
Is there any way to solve the problem? I tried a lot of stuff but couldn't get it to work.
Here is the example on JSFiddle: http://jsfiddle.net/vv4j3uz2/9/
Here is my code:
HTML:
<div class="container">
<h1>
Working sync between the two sliders
</h1>
<div class="slider slider-test-images">
<div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=test" class="img-fluid"></div>
</div>
<div class="slider slider-test">
<div>
<p class="h1">test 1</p>
</div>
<div>
<p class="h1">test 2</p>
</div>
<div>
<p class="h1">test 3</p>
</div>
<div>
<p class="h1">test 4</p>
</div>
</div>
<h1>
Sync between sliders not working
</h1>
<div class="tab-content" id="ueberTabSlider">
<div class="tab-pane fade home show active" id="home_slider" role="tabpanel" aria-labelledby="home-tab">
<div class="slider slider-home-images">
<div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=home" class="img-fluid"></div>
</div>
</div>
<div class="tab-pane fade profile" id="profile_slider" role="tabpanel" aria-labelledby="profile-tab">
<div class="slider slider-profile-images">
<div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=profile" class="img-fluid"></div>
</div>
</div>
<div class="tab-pane fade contact" id="contact_slider" role="tabpanel" aria-labelledby="contact-tab">
<div class="slider slider-contact-images">
<div><img src="http://via.placeholder.com/1242x600?text=contact" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=contact" class="img-fluid"></div>
<div><img src="http://via.placeholder.com/1242x600?text=contact" class="img-fluid"></div>
</div>
</div>
</div>
<div class="nav-detail">
<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">home</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">profile</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">contact</a></li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active home" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="slider slider-home">
<div>
<p class="h1">home 1</p>
</div>
<div>
<p class="h1">home 2</p>
</div>
<div>
<p class="h1">home 3</p>
</div>
<div>
<p class="h1">home 4</p>
</div>
</div>
</div>
<div class="tab-pane fade profile" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="slider slider-profile">
<div>
<p class="h1">profile 1</p>
</div>
<div>
<p class="h1">profile 2</p>
</div>
<div>
<p class="h1">profile 3</p>
</div>
<div>
<p class="h1">profile 4</p>
</div>
<div>
<p class="h1">profile 5</p>
</div>
</div>
</div>
<div class="tab-pane fade contact" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="slider slider-contact">
<div>
<p class="h1">contact 1</p>
</div>
<div>
<p class="h1">contact 2</p>
</div>
<div>
<p class="h1">contact 3</p>
</div>
</div>
</div>
</div>
</div>
JS:
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
$($(this).attr('href')).find('.slider').slick({
prevArrow: '<button type="button" class="slick-prev"><i class="icon-pfeil_ueber_uns_links"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="icon-pfeil_ueber_uns_rechts"></i></button>',
})
}).first().trigger('shown.bs.tab');
$('.slider-test-images').slick({
asNavFor: '.slider-test',
dots: true,
arrows: false,
});
$('.slider-test').slick({
asNavFor: '.slider-test-images',
});
$('.slider-home-images').slick({
asNavFor: '.slider-home',
dots: true,
arrows: false,
});
$('.slider-home').slick({
asNavFor: '.slider-home-images',
});
$('.slider-profile-images').slick({
asNavFor: '.slider-profile',
dots: true,
arrows: false,
});
$('.slider-profile').slick({
asNavFor: '.slider-profile-images',
});
$('.slider-contact-images').slick({
asNavFor: '.slider-contact',
dots: true,
arrows: false,
});
$('.slider-contact').slick({
asNavFor: '.slider-contact-images',
});
来源：https://stackoverflow.com/questions/48403464/slick-slider-breaks-after-tab-change-and-slider-nav-doesnt-sync