как избежать 3-хкратного дублирования bxslider после toggle ();

Question

как избежать 3-хкратного дублирования bxslider после toggle ();

Я пытаюсь переключить bxslider. но после переключения bxslider создает изображения в 3 раза.

<div style="float:left; width: 50%; height: 250px;" class="proj-5">
<ul class="slider slider1 left">
<li style="background-image: url(http://local.fundhive.com/images/newsroom/8b/ea/8bea_fi_en8bea1754_ba81_df2e_7e83_1e617756c2e1.jpg);"></li>
<li style="background-image: url(http://local.fundhive.com/images/newsroom/8e/45/8e45_fi_en8e455531_7618_2aba_3330_b372fdd99db2.jpg);"></li>
</ul>
</div>

<div style="float:left; width: 50%; height: 250px; display:none" class="proj-6">
<ul class="slider slider1 left">
<li style="background-image: url(http://local.fundhive.com/images/newsroom/30/15/3015_fi_en3015d80c_b110_8a62_3f58_7b94dc82e9fb.jpg);"></li>
<li style="background-image: url(http://local.fundhive.com/images/newsroom/42/6b/426b_fi_en426b793f_a52f_d01d_1d53_53db562e8cde.jpg);"></li>
</ul>
</div>
<script>
$('.proj-property-id').click(function(event) {
$('.proj-5').toggle();
$('.proj-6').toggle();
});
</script>

перед переключением:

после переключения:

-1

bxslider jquery php

Решение

По вопросам рекламы [email protected]

Accepted Answer

При скрытии и показе bxSlider, вы должны использовать его redrawSlider() метод. Ниже приведен соответствующий JQuery:

// <<$(document).ready()>> equivalent
$(function() {

// instantiate bxSlider seperately
var bx1 = $('.bx1').bxSlider();
var bx2 = $('.bx2').bxSlider();

// Use `.on` method to handle binding to a dynamically created element.
$('.toggle').on('click', function(e) {

// Changed `toggle()` to `toggleClass()` because it's versatile.
$('.layer').toggleClass('on off');

// Ternary: if `.1st` has class '.on'| then: call bxSlider method redrawSlider() on bx1, if not, then:
($('.lst').hasClass('on')) ? bx1.redrawSlider(): bx2.redrawSlider();
});
});

SNIPPET

$(function() {
var bx1 = $('.bx1').bxSlider();
var bx2 = $('.bx2').bxSlider();
$('.toggle').on('click', function(e) {
$('.layer').toggleClass('on off');
($('.lst').hasClass('on')) ? bx1.redrawSlider(): bx2.redrawSlider();
});
});

.toggle {
display: block;
margin: 10px auto;
}
.layer {
position: relative;
}
.on {
display: block !important;
}
.off {
display: none !important;
}
img {
display: block;
margin: 10px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"><button class='toggle'>Switch Sliders</button>

<div class='layer on 1st'>
<ul class="bx1">
<li>
<img src="https://placehold.it/350x150/fff/000?text=1">
</li>
<li>
<img src="https://placehold.it/350x150/fff/000?text=2">
</li>
</ul>
</div>
<div class='layer off 2nd'>
<ul class="bx2">
<li>
<img src="https://placehold.it/350x150/000/fff?text=3">
</li>
<li>
<img src="https://placehold.it/350x150/000/fff?text=4">
</li>
</ul>
</div>

0

Другие решения

Других решений пока нет …

Источник