bxslider 슬라이더 반응형 문제...
본문
bxslider를 사용하여, 768사이즈 이하로 줄어들었을 때만
슬라이드로 변형되도록 사용하고 있습니다.
그런데, 사이즈가 작아지면서 변하는 것은 괜찮은데,
윈도우 사이즈를 줄였다가 다시 늘리면 슬라이드가 그대로 적용이 됩니다.
(줄였다 늘린상태에서 새로고침을 하면 원래대로 돌아옵니다)
이 상태에서 다시 769이상이 되면, 반응하지 않도록 설정하는 방법이 있을까요?
스크립트에 무지합니다 ㅠ ㅠ 늘 질문만 해서 죄송하네요...
아시는 분 부탁드립니다.
아래는 적용한 코드입니다.(일본어 코멘트는 무시해주세용)
//bxslider
// スライダーの状態を管理
var sliderState = 'destroy';
var slider;
// 1回目の処理
var w = $(window).width();
var x = 768;
if (w <= x) {
// スライダーの構築
slider = $('#bxslider01, #bxslider02').bxSlider();
// スライダーの状態を変更
sliderState = 'build';
}
// 画面サイズを変更したときの処理
$(window).on('resize', function() {
w = $(window).width();
x = 768;
// 画面サイズが768以下 かつ スライダーが未構築のとき
if (w <= x && sliderState == 'destroy') {
// スライダーの構築
slider = $('#bxslider01, #bxslider02').bxSlider();
// スライダーの状態を変更
sliderState = 'build';
moveSlides: 1;
// 画面サイズが768より大きい かつ スライダーが構築されているとき
} else if (w > x && sliderState == 'build') {
// スライダーの破棄
slider.destroySlider();
// スライダーの状態を変更
sliderState = 'destroy';
}
});
답변 3
셀렉터가 두개 이상일때는 배열을 써야 되네요...
이렇게 다시 코드를 고쳐보세요~
//bxslider
// スライダーの状態を管理
var sliderState = 'destroy';
var slider = [];
function slider768(){
var w = $(window).width();
var x = 768;
if( !slider.length ){
if (w <= x) {
// スライダーの構築
$('#bxslider01, #bxslider02').each(function(i){
slider[i] = $(this).bxSlider();
});
// スライダーの状態を変更
sliderState = 'build';
}
} else {
// 画面サイズが768以下 かつ スライダーが未構築のとき
if (w <= x && sliderState == 'destroy') {
// スライダーの構築
$.each(slider, function(i){
this.reloadSlider({
});
});
// スライダーの状態を変更
sliderState = 'build';
// 画面サイズが768より大きい かつ スライダーが構築されているとき
} else if (w > x && sliderState == 'build') {
// スライダーの破棄
$.each(slider, function(i){
//this.destroySlider();
var othis = this,
$el = $(this[0]);
$.when(othis.destroySlider()).then(function(){
setTimeout(function(){
$el.removeAttr('style').find("li").removeAttr('style');
}, 1);
});
});
// スライダーの状態を変更
sliderState = 'destroy';
}
}
}
slider768();
// 画面サイズを変更したときの処理
$(window).on('resize', function() {
slider768();
});
언제나 도와주셔서 감사합니다 ㅠㅠ
공부해야지 하면서 영 기초를 못 떼고 있네요...
항상 감사합니다 !!
window.onresize = function() {
var w = $(window).width();
답변 감사합니다..
죄송합니다만, 써주신 부분을 몇번째 줄에 적용하여야 할까요?
19번째 줄이라 생각되어 적용 해 보았는데,
이미 리사이즈 설정이 되어있는 것 아닌가 싶네요.. ㅠㅠ
대부분의 슬라이드 스크립트가 내부 html을 변환시켜면서 동작을 합니다.
위의 소스를 보면
slider = $('#bxslider01, #bxslider02').bxSlider(); <<< 두번 적혀져 있는 부분이 잘못 되었습니다.
예들 들어
첫번째 기억 (처음상태)
slider = $('#bxslider01, #bxslider02').bxSlider(); // 이때 내부 html이 변환된 상태
두번째 기억 (처음과 다른 상태)
slider = $('#bxslider01, #bxslider02').bxSlider(); // 또 다시 내부 html이 변환된 상태
이렇게 있다면
slider.destroySlider(); 호출했을때
첫번째 기억을 호출해야 되는데, 두번째 기억을 호출하게 됩니다.
해결방법은 첫번째 기억을 호출하게 만들면 되는겁니다.
bxslider 에는 reloadSlider 란 메소드가 있습니다. ( 새로고침 )
http://bxslider.com/examples/reload-slider-settings
아래 코드로 테스트해 보세요. 그래도 문제가 있다면 slider.destroySlider(); 할때 따로 처리를 해줘야 하는데 잘 안되시면 해당 적용된 url을 적으셔서 다시 질문 하시면 됩니다.
//bxslider
// スライダーの状態を管理
var sliderState = 'destroy';
var slider;
function slider768(){
var w = $(window).width();
var x = 768;
if( !slider ){ //최초 문서를 불러왔을때
if (w <= x) {
// スライダーの構築
slider = $('#bxslider01, #bxslider02').bxSlider();
// スライダーの状態を変更
sliderState = 'build';
}
} else { //그외의 경우에는
// 画面サイズが768以下 かつ スライダーが未構築のとき
if (w <= x && sliderState == 'destroy') {
// スライダーの構築
slider.reloadSlider({
});
// スライダーの状態を変更
sliderState = 'build';
// 画面サイズが768より大きい かつ スライダーが構築されているとき
} else if (w > x && sliderState == 'build') {
// スライダーの破棄
slider.destroySlider();
// スライダーの状態を変更
sliderState = 'destroy';
}
}
}
slider768(); //문서를 불러왔을때 실행
// 画面サイズを変更したときの処理
$(window).on('resize', function() {
//리사이즈 할때마다 실행
slider768();
});
답변 감사합니다. 그대로 복붙했는데 실행이 안되네요 ㅠ ㅠ 으헉...
제가 코드를 이해하지 못하고 있어서 어디를 수정해야 할지도 모르겠네요 허허
결국 마지막에 붙여주신 부분이 다시 첫번째거를 불러오라는 명령이라는거지요?...
흠... ㅠㅠ 리사이즈라는게 새로고침이 적용되는건 아닌가보아용~
건님~ 시간되실 때 이 페이지 좀 봐주시겠어요?
가운데 리스트로 된 세 이미지 인데, 윈도우 화면 사이즈를 작게 했을 때만 실행하고 싶은데,
그것 까진 되거든요, 근데 작은 상태에서 크게 윈도우를 다시 잡아 늘리면
원래 상태로 되돌아가지 않습니다.. ㅠㅠ
http://www.funsite-trunk.biz/hie_test/index.html
