сброс bxSlider

Question

Я выбрал карусель в другом направлении, выбрав bxSlider вместо jCarousel.Это для галереи изображений, которую я создаю http://rjwcollective.com/equinox/rishi_gallery/eqgall.php

Проблема, с которой я сталкиваюсь, заключается в том, что когда я сбрасываю фильтры или выбираю другой фильтр, ползунок не сбрасывается.Это код для начальной загрузки:

    //first load
$.ajax({
    type:"POST",
    url:"sortbystate.php",
    data:"city=&gender=&category=",
    success:function(data){
            //carousel

            $('#thumbs').html(data);


            //alert("whoa, careful there!");
                 $('#thumbs').bxSlider({auto: false, mode:'vertical',
                            autoControls: false,
                            autoHover: true,
                            pager: false,
                            displaySlideQty: 4,
                            speed:800,
                            infiniteLoop: true,      
                            moveSlideQty: 4,

                            controls: true});
    }

});//end ajax

Это код для обработки смены фильтра:

$(".statelist :input").click(function(){

    var carousel = $('#thumbs').data('jcarousel');  
    var state = $('.statelist input:checked').attr('value');
    var gender = $('.gender input:checked').attr('value');
    var category =$('.category input:checked').attr('value');
        $.ajax({
            type:"POST",
            url:"sortbystate.php",
            data:"city="+state+"&gender="+gender+"&category="+category,
            success:function(data){
                    //alert("whoa, careful there!");

                    $('#thumbs').html(data);
                         $('#thumbs').bxSlider({auto: false, mode:'vertical',
                                    autoControls: false,
                                    autoHover: true,
                                    pager: false,
                                    displaySlideQty: 4,
                                    speed:800,
                                    infiniteLoop: true,      
                                    moveSlideQty: 4,

                                    controls: true});


                    //$('#thumbs').jcarousel('add', index, data);
            }


        });//end ajax
    });

Я ссылался на документацию bxSlider, и он имел встроенныйфункция для обработки сброса: destroyShow (): function ()
reloadShow (): function ()

Я не совсем понимаю, что я делаю неправильно.Даже пытался очистить карусельный div перед загрузкой его с данными, используя .empty (), без кубиков.

Мысли?

Редактировать: ссылка на сайт bxSlider: http://bxslider.com/

Answer 1

Объявление переменной mySlider за пределами блока, готового для документа, решило проблему для меня:

var mySlider;
$(function(){
    mySlider= $('#slider').bxSlider({
        auto: true,
        controls: true
    });

    mySlider.reloadShow();
})

Alex

Answer 2

Решение: используйте reloadSlider

   slider = $('.bxslider').bxSlider();
   slider.reloadSlider();

Answer 3

Я писал программу, которая выполняет несколько вызовов AJAX по таймеру и отображает результаты в bxslider, и я также столкнулся с проблемой, когда bxslider не обновлялся. Вот как я решил это:

var $slider = null;

И внутри той части кода, где вам нужно инициализировать или обновить слайдер, сделайте следующее:

if ($slider == null) {
    $slider = $('.sliderDashboard').bxSlider({
        slideWidth: 200,
        minSlides: 1,
        maxSlides: 1,
        slideMargin: 10
    });
}
else {
    $slider.reloadSlider();
}

Answer 4

** Примечание. Для многократной перезагрузки слайдера bx по щелчку элемента. *

$ (function () {

    var slider1 = $('#slider-1 .product_slider ul').bxSlider({
            pager:false,
            auto:true,
        });

    var slider2 = $('#slider-2 .product_slider ul').bxSlider({
        pager:false,
        auto:true,
    });
    var slider3 = $('#slider-3 .product_slider ul').bxSlider({
        pager:false,
        auto:true,
    });
    var slider4 = $('#slider-4 .product_slider ul').bxSlider({
        pager:false,
        auto:true,
    });

    $('.tab_container ul.nav-tabs li a').on('click',function() {
        slider1.reloadSlider();
        slider2.reloadSlider();
        slider3.reloadSlider();
        slider4.reloadSlider();
    });
});

Автор: Milan Pandya

Answer 5

Используйте следующее:

mySlider.reloadSlider();

Сброс слайдера

Answer 6

Чтобы принять участие и в этом вопросе: новый BxSlider, похоже, больше не имеет destroyShow () или reloadShow ()? По крайней мере, у меня это не работает, и в документации по API тоже нет ... Просто говорю.

Answer 7

функция reloadShow выполняется для функции

destoryShow и initShow

destroyShow функция удаляет все стили и оболочки, которые работают нормально в горизонтальном режиме, но в вертикальном режиме и в режиме постепенного исчезновения, она также удаляет содержимоеползунок

попробуйте заменить условие переключателем

// unwrap all bx-wrappers
// remove any styles that were appended

if(options.mode == 'fade' || options.mode == 'verticel'){
$parent.unwrap().unwrap();
$parent.children().removeAttr('style');
}else{
    $parent.unwrap().unwrap().removeAttr('style');
    $parent.children().removeAttr('style').not('.pager').remove();
}

надеюсь, это поможет

Answer 8

Как сказано на веб-сайте: у вас есть slideshowContainer, который нужно присоединить к переменной, чтобы использовать публичные функции. Поскольку reloadShow() и destroyShow() являются публичными функциями, это единственный путь. Работал отлично для меня. Я просто положил

var $theslideshow = [functionThatCallsYourSlideshow] 

до моей функции и вызывается потом $theslideshow.destroyShow();

надеюсь, это поможет

Answer 9

Вы должны играть с этими двумя - destroyShow() и reloadShow().Я предполагаю, что используется только reloadShow(), но если это не сработает, попробуйте destroyShow(), а затем bxSlider().Вам понадобится переменная как ссылка на API плагина.

var slider =  $('#thumbs').bxSlider( { ... } );
slider.reloadShow(); // or slider.destroyShow(); $('#thumbs').bxSlider( { ... } );

Удачи