bxslider 중복사용시 재생/멈춤 동일하게 욺직입니다.ㅠㅠ

bxslider 중복사용시 재생/멈춤 동일하게 욺직입니다.ㅠㅠ

QA

bxslider 중복사용시 재생/멈춤 동일하게 욺직입니다.ㅠㅠ

답변 3

본문

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~~ 형식으로 구분하시면 됩니다


$(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시 시작버튼 숨김.

});

해당변경내용이 맞는지 몰겠습니다.^^

답변 감사드리며

해당내용처럼 변경했는데요.. 

위의 롤링이미지 버튼은 클릭해도 무반응이구요 되버렸구요.

아래롤링이미지의 버튼을 클릭하면 위에 버튼이 바꿔버립니다..ㅜㅜ 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 29
© SIRSOFT
현재 페이지 제일 처음으로