SIR
목록으로

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

신신마적
프로필 보기이 회원 글보기이 회원의 댓글보기
 6년 전 조회 8,478
답변 3
목록

bxslider 를 한페이지에 중복으로 사용하고 있는데요

작동은 각각에 class 로 지정해서 잘 작동되는데요..

재생/멈춤버튼만 두개가 동일하게 작동하고 있습니다.

두개가 따로따로 되게끔 어떻게 하면 되는지 고수님들의 답변 부탁드립니다..ㅜㅜ

 

Copy 
<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>
#bxslider #슬라이드 #롤링

답변 3개

채택된 답변
+20 포인트 
옵션부분에 
    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~~ 형식으로 구분하시면 됩니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

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


});

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

답변 감사드리며

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

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

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

main 에있는 .bx-stop .bx-start

main1 에있는 .bx-stop .bx-start

 

start stop class명이 같아서 그런거 같은데요

main1 에있는 .bx-stop1 .bx-start1 클라스명을 바꾸면 되지않을까요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고