Witam
Mam karuzelę OWL gdzie są następujące elementy, musiałem poprzez jQuery ukryć elementy owl-item od górnie bo każdy obrazek ma wysuwany element do dołu a jak karuzela miała overflow: hidden to ucinało mi menu tak jak tutaj https://github.com/OwlCarousel2/OwlCarousel2/issues/1908
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item active" style="width: 270px; margin-right: 24px;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
<div class="owl-item" style="width: 270px; margin-right: 24px; display: none;">
I chciałbym żeby przy paginacji następowała zmiana pierwszego elementu owl-item active na hide oraz pierwszego elementu z klasą owl-item na show
Jak to najlepiej zrobić?
Zrobiłem taki skrypcik
<script type="text/javascript">
jQuery(function() {
jQuery('.owl-item:not(.active)').hide();
jQuery('.owl-next').click(function() {
if(jQuery('.owl-carousel').change()) {
jQuery('.owl-item:not(.active)').next().show();
}
})
})
Skrypt nie działa najlepiej bo owszem elementy widoczne są te co trzeba, ale po użyciu paginacji pojawiają się wszystkie ukryte zamiast przesuwać się o jeden element w bok .
Jak to najlepiej rozwiązać?