resetting bxSlider

Question

jCarousel 대신 bxSlider를 사용하여 구현 한 회전식 컨베이어에서 다른 방향을 취했습니다. 이것은 내가 만들고있는 이미지 갤러리입니다. 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 

입니다 : 이것은 inital 부하에 대한 코드입니다 내가 bxSlider의 설명서를 참조

$(".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 
    }); 

이 그것을 처리하는 내장 함수를했다 리셋 : destroyShow() :() 함수
reloadShow() :() 함수

나는 내가 뭘 잘못에 같은 ​​혼란 스러워요. 캐세이 패 사업부를 비우기 전에 비어있는 비어있는 .omey()를 사용하여 데이터를로드 해 보았습니다.

생각하십니까?

편집 : bxSlider 웹 사이트 링크 : - destroyShow() 및 reloadShow()http://bxslider.com/

Answer 1

나를 위해 문제를 해결 당신이 slideshowContainer은 공용 함수를 사용하기 위해 변수에 첨부되어야합니다. reloadShow() 및 destroyShow()은 공개 기능이므로이 방법 만 사용할 수 있습니다. 나를 위해 완벽하게 일했습니다. 나는이

destroyShow을

Answer 2

두이 함께 플레이해야한다. 내 생각 엔 reloadShow() 만 사용하지만 작동하지 않는 경우 destroyShow() 다음에 bxSlider()을 입력하십시오. 플러그 인 API에 대한 참조로 변수가 필요합니다. 웹 사이트가 말한대로

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

    mySlider.reloadShow(); 
}) 

알렉스

Answer 3

: 문서 준비 블록 밖에 "mySlider"변수를 선언

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

행운

Answer 4

reloadShow의 funciton이

destoryShow을 기능을 실행하는 데 도움이 initShow 희망 $theslideshow.destroyShow();

단순히 제 기능을하기 전에

var $theslideshow = [functionThatCallsYourSlideshow] 

을 넣고 이후라고했습니다 함수는 가로 모드에서 정상적으로 작동하는 모든 스타일과 래퍼를 삭제합니다.하지만 수직 및 모드를 퇴색 그것은 또한

이 스위치를 사용하여 조건을 대체하려고 슬라이더의 내용을 삭제

// 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 5

이이 문제에 참여하는 데 도움이 : 새로운 BxSlider은 '아무튼 더 이상 destroyShow() 또는 reloadShow()가없는 것 같습니다. 최소한 나를 위해 작동하지 않으며 API 문서에도 없습니다 ... 그냥 말합니다.

Answer 6

사용하여 다음

mySlider.reloadSlider(); 

이 슬라이더를

Answer 7

솔루션을 재설정합니다 : reloadSlider

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

Answer 8

** 참고를 사용하십시오 여러 BX 슬라이더를 다시로드의 경우의 클릭에 요소. *

$ (함수() {으로

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(); 
    }); 
}); 

밀라노 디야

나는 AJAX의 무리가 타이머를 호출하고에 결과를 표시 할 프로그램을 작성했다

Answer 9

var $slider = null; 

그리고 내부 : bxslider 나는 또한 bxslider이 아니었다 refreshing.This 문제로 실행 내가 그것을 해결하는 방법입니다 슬라이더를 초기화하거나 새로 고쳐야하는 코드 부분은 다음과 같습니다.

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