bxslider 중복사용시 재생/멈춤 동일하게 욺직입니다.ㅠㅠ
본문
bxslider 를 한페이지에 중복으로 사용하고 있는데요
작동은 각각에 class 로 지정해서 잘 작동되는데요..
재생/멈춤버튼만 두개가 동일하게 작동하고 있습니다.
두개가 따로따로 되게끔 어떻게 하면 되는지 고수님들의 답변 부탁드립니다..ㅜㅜ
<script>
$(document).ready(function(){
var main = $('.bxslider').bxSlider({
mode: 'fade',
auto: true, //자동으로 슬라이드
controls : true, //좌우 화살표
autoControls: true, //stop,play
pager:true, //페이징
pause: 3000,
autoDelay: 0,
slideWidth: 800,
speed: 500,
stopAutoOnclick:true
});
$(".bx-stop").click(function(){ // 중지버튼 눌렀을때
main.stopAuto();
$(".bx-stop").hide();
$(".bx-start").show();
return false;
});
$(".bx-start").click(function(){ //시작버튼 눌렀을때
main.startAuto();
$(".bx-start").hide();
$(".bx-stop").show();
return false;
});
$(".bx-start").hide(); //onload시 시작버튼 숨김.
var main1 = $('.bxslider1').bxSlider({
mode: 'fade',
auto: true, //자동으로 슬라이드
controls : true, //좌우 화살표
autoControls: true, //stop,play
pager:true, //페이징
pause: 3000,
autoDelay: 0,
slideWidth: 800,
speed: 500,
stopAutoOnclick:true
});
$(".bx-stop").click(function(){ // 중지버튼 눌렀을때
main1.stopAuto();
$(".bx-stop").hide();
$(".bx-start").show();
return false;
});
$(".bx-start").click(function(){ //시작버튼 눌렀을때
main1.startAuto();
$(".bx-start").hide();
$(".bx-stop").show();
return false;
});
$(".bx-start").hide(); //onload시 시작버튼 숨김.
});
</script>
<div class="bxslider">
<div><img src="이미지경로~~" alt="그림1"></div>
<div><img src="이미지경로~~" alt="그림2"></div>
</div>
<div class="bxslider1">
<div><img src="이미지경로~~" alt="그림1"></div>
<div><img src="이미지경로~~" alt="그림2"></div>
</div>
답변 3
옵션부분에 speed: 500, stopAutoOnclick:true
부분에 추가적으로
stopAutoOnclick:true,
wrapperClass: 'bx-wrapper mainCon' //
다른 것은
stopAutoOnclick:true,
wrapperClass: 'bx-wrapper mainCon1' //
으로 넣어주시고
각각 호출시
$(".bx-start").click(function(){
이 아나라ㅣ
$(",mainCon .bx-start").click(function~~ 형식으로 구분하시면 됩니다
main 에있는 .bx-stop .bx-start
main1 에있는 .bx-stop .bx-start
start stop class명이 같아서 그런거 같은데요
main1 에있는 .bx-stop1 .bx-start1 클라스명을 바꾸면 되지않을까요.
$(document).ready(function(){
var main = $('.bxslider').bxSlider({
mode: 'fade',
auto: true, //자동으로 슬라이드
controls : true, //좌우 화살표
autoControls: true, //stop,play
pager:true, //페이징
pause: 3000,
autoDelay: 0,
slideWidth: 800,
speed: 500,
stopAutoOnclick:true,
wrapperClass: 'bx-wrapper mainCon' //
});
$(".bx-stop").click(function(){ // 중지버튼 눌렀을때
main.stopAuto();
$(".bx-stop").hide();
$(".bx-start").show();
return false;
});
$(".bx-start").click(function(){ //시작버튼 눌렀을때
main.startAuto();
$(".bx-start").hide();
$(".bx-stop").show();
return false;
});
$(".bx-start").hide(); //onload시 시작버튼 숨김.
var main1 = $('.bxslider1').bxSlider({
mode: 'horizontal',
auto: true, //자동으로 슬라이드
controls : true, //좌우 화살표
autoControls: true, //stop,play
pager:true, //페이징
pause: 3000,
autoDelay: 0,
slideWidth: 800,
speed: 500,
stopAutoOnclick:true
});
$(".bx-stop").click(function(){ // 중지버튼 눌렀을때
main1.stopAuto();
$(".bx-stop").hide();
$(".bx-start").show();
return false;
});
$(".bx-start").click(function(){ //시작버튼 눌렀을때
main1.startAuto();
$(".bx-start").hide();
$(".bx-stop").show();
return false;
});
$(".bx-start").hide(); //onload시 시작버튼 숨김.
});
해당변경내용이 맞는지 몰겠습니다.^^
답변 감사드리며
해당내용처럼 변경했는데요..
위의 롤링이미지 버튼은 클릭해도 무반응이구요 되버렸구요.
아래롤링이미지의 버튼을 클릭하면 위에 버튼이 바꿔버립니다..ㅜㅜ
답변을 작성하시기 전에 로그인 해주세요.