테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

bx 슬라이더 질문좀 할게요! 채택완료

바트컨트롤
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전 조회 7,770
답변 3
목록

탭구조로 

 

3개의 슬라이더를 가져오려고하는데

 

단순 텍스트만 했을땐 탭구조가 먹히는데

 

bx슬라이더하면 2,3번째가 안먹히드라구요..

 

조언좀 부탁드릴게요...

 

</p>

<p><!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .container{width:640px;max-width:640px;margin:0 auto}

        .tabs{width:100%}

        .tabs:after{display:block;clear:both;content:""}

        .tabs li{float:left;padding:0 20px;list-style:none;}

        .tab_contents{width:100%}

        .tab_content{display:none;}

        .tab_content.first{display:block;}

    </style></p>

<p>     <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></a>

    <script src="<a href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script></a>

    <link rel="stylesheet" href="<a href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"></a>

    <script>

        $(function() {

            $('#bxslider1').bxSlider({

              auto: true,

              autoControls: true

              stopAutoOnClick: true,

              pager: true,

              slideWidth: 600

            });</p>

<p>            $('#bxslider2').bxSlider({

              auto: true,

              autoControls: true,

              stopAutoOnClick: true,

              pager: true,

              slideWidth: 600

            });</p>

<p>            $('#bxslider3').bxSlider({

              auto: true,

              autoControls: true,

              stopAutoOnClick: true,

              pager: true,

              slideWidth: 600

            });</p>

<p>

            $('ul.tabs li').click(function() {

                var activeTab = $(this).attr('data-tab');

                $('ul.tabs li').removeClass('first');

                $('.tab_content').removeClass('first');

                $(this).addClass('first');

                $('#' + activeTab).addClass('first');

            })

        });

    </script>

 </head>

 <body>

    <div class="container">

        <ul class="tabs">

            <li class="tab first" data-tab="tab1"><a href="#">탭첫번째</a></li>

            <li class="tab"       data-tab="tab2"><a href="#">탭두번째</a></li>

            <li class="tab"       data-tab="tab3"><a href="#">탭세번째</a></li>

        </ul></p>

<p>        <div class="tab_contents">

            <div class="tab_content first" id="tab1">

                <div id="bxslider1">

                  <div><img src="./coffee1.jpg"></div>

                  <div><img src="./coffee2.jpg"></div>

                  <div><img src="./coffee3.jpg"></div>

                </div>

            </div></p>

<p>            <div class="tab_content" id="tab2">

                <div id="bxslider2">

                  <div><img src="./coffee1.jpg"></div>

                  <div><img src="./coffee2.jpg"></div>

                  <div><img src="./coffee3.jpg"></div>

                </div>

            </div></p>

<p>            <div class="tab_content"id="tab3">

                <div id="bxslider3">

                  <div><img src="./coffee1.jpg"></div>

                  <div><img src="./coffee2.jpg"></div>

                  <div><img src="./coffee3.jpg"></div>

                </div>

            </div>    

        </div>

    </div></p>

<p> </body>

</html></p>

<p>

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

답변 3개

채택된 답변
+20 포인트
에

css에서 탭메뉴를 display: none을 하는 경우에 생기는 현상이 저도 있엇습니다.

 

이것을 그냥 position 을 이용해서 처리한적이 있습니다.

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

답변에 대한 댓글 2개

�
헉! 혹시 position을 이용해서 처리하셨다는부분이
absolute로 겹쳐놓고 z-index로 뿌리신다는 말씀인가요!?

아니시라면...어떠한방법이시죠ㅠㅠ?
�
아! 해결했습니다...
구성옵션에 슬라이드리로드 시키면되더군요!
그래도 답변 달아주셨으니! 감사합니다!

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

쥬

정말 감사합니다. 평안한 주말되세요.

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

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

쥬

혹시 슬라이드 리로드 하는 방법을 자세히 알수좀 있을까요? 저도 똑같은 상황인데 어떻게 해결이 안되서요...

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

답변에 대한 댓글 1개

�
과거글이군요
해결코드
[code]

$(".tab1").click(function() {
mySlider.reloadSlider();
});
[/code]
전체코드
[code]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{padding:0;margin:0;}
.container{width:640px;max-width:640px;margin:0 auto}
.tabs{width:100%}
.tabs:after{display:block;clear:both;content:""}
.tabs li{float:left;padding:0 20px;list-style:none;}
.tab_contents{width:100%}
.bx-pager{ width: 100%;}
.bx-pager a{ width: 33.3%; display: block; float: left;}
.bx-pager img{ width: 100%;}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

<script>
$(function() {
$(".tab_content").hide()
$(".tab_content.first").show()
$('ul.tabs > li').click(function() {
var activeTab = $(this).attr('data-tab');
$('ul.tabs > li').removeClass('first');
$('.tab_content').removeClass('first');
$(this).addClass('first');
$('#' + activeTab).addClass('first');
$(".tab_content").hide()
$(".tab_content.first").show()
})

mySlider1 = $('.bxslider1').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600,
pagerCustom: '#bx-pager1'
});
mySlider2 = $('.bxslider2').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600,
pagerCustom: '#bx-pager2'
});
mySlider3 = $('.bxslider3').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600,
pagerCustom: '#bx-pager3'
});
$(".tab1").click(function() {
mySlider.reloadSlider();
});
$(".tab2").click(function() {
mySlider2.reloadSlider();
});
$(".tab3").click(function() {
mySlider3.reloadSlider();
});


});
</script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="tab tab1 first" data-tab="tab1"><a href="#">탭첫번째</a></li>
<li class="tab tab2" data-tab="tab2"><a href="#">탭두번째</a></li>
<li class="tab tab3" data-tab="tab3"><a href="#">탭세번째</a></li>
</ul>

<div class="tab_contents">
<div class="tab_content first" id="tab1">
<div class="bxslider1">
<div><img src="./coffee1.jpg"></div>
<div><img src="./coffee2.jpg"></div>
<div><img src="./coffee3.jpg"></div>
</div>
<div id="bx-pager1" class="bx-pager clear">
<a data-slide-index="0" href=""><img src="./coffee1.jpg" /></a>
<a data-slide-index="1" href=""><img src="./coffee2.jpg" /></a>
<a data-slide-index="2" href=""><img src="./coffee3.jpg" /></a>
</div>
</div>

<div class="tab_content" id="tab2">
<div class="bxslider2">
<div><img src="./coffee2.jpg"></div>
<div><img src="./coffee3.jpg"></div>
<div><img src="./coffee1.jpg"></div>
</div>
<div id="bx-pager2" class="bx-pager clear">
<a data-slide-index="0" href=""><img src="./coffee2.jpg" /></a>
<a data-slide-index="1" href=""><img src="./coffee3.jpg" /></a>
<a data-slide-index="2" href=""><img src="./coffee1.jpg" /></a>
</div>
</div>

<div class="tab_content"id="tab3">
<div class="bxslider3">
<div><img src="./coffee3.jpg"></div>
<div><img src="./coffee2.jpg"></div>
<div><img src="./coffee1.jpg"></div>
</div>
<div id="bx-pager3" class="bx-pager clear">
<a data-slide-index="0" href=""><img src="./coffee3.jpg" /></a>
<a data-slide-index="1" href=""><img src="./coffee2.jpg" /></a>
<a data-slide-index="2" href=""><img src="./coffee1.jpg" /></a>
</div>
</div>
</div>
</div>

</body>
</html>

[/code]

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

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

로그인

전체 질문 목록

다온테마 질문

핑크베이비
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 149
메뉴구성 다온테마
답변대기

그누보드 폭을 고정하고 에디터 화면과 브라우저 화면이 일치되었으면 좋겠습니다.

ecoseobu
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 129
그누보드5
채택

SMS 오류

php사랑
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 139
영카트5
채택

그누모드 반응형 태그

ecoseobu
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 145
그누보드5
채택

영카트 모바일환경에서 결제가 안되는 현상

eelancer
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 189
영카트5 로그인풀림 휴대폰본인인증 모바일결제
답변대기

회원정보 메모

북북마크스
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 151
그누보드5
채택

특정날짜 이후의 글이 검색도 안되고 카테고리 분류에도 뜨지 않습니다.

아몬2
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 152
그누보드5 검색
채택

전체 검색 시 카테고리가 없는 게시판의 처리에 대하여...

허당빵
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 164
그누보드5 카테고리 분류 검색
채택

금방 그누 설치 하고 왔는데 스킨 설치 방법 모르겠습니다.

뭔뭔지모르겠다
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 228
그누보드5
답변대기

AI 로 handwriting 한 로고를 만들고 싶은데 괜찮은 곳 없을까요?

간장게장같은남자
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 211
ai logo 그누보드5
채택

외부 사이트 로그인에 대한 질문

미니님a
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 222
그누보드5
답변대기

그누 보드가 가장 쓸만한 건가요?

조진아
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 422
그누보드5
답변대기

삭제한 게시물을 다른게시판에 쌓아놓고 싶습니다.

ssmltree
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 326
그누보드5
채택

ftp 500 에러 관련 질문 (FTP 접속 실패)

hiiann
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 220
ftp ftp에러 500에러
채택

그누 업데이트 질문

좐슨앤존슨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 300
그누보드 업데이트
채택

비회원 접근 불가 사이트 만드는 방법

굼떠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 614
그누보드5 영카트5 php
채택

윈도우 11로 업그래이드 후 네트워크 프린터 접속이 안됩니다 ㅠㅠ

알알비씨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 198
네트워크
채택

그누보드5 패치 및 업데이트 편하게 하는 방법?

ideaman
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 379
그누보드5 영카트5
채택

본인인증 회원정보찾기

경주빵
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 170
본인인증 휴대폰인증 아이디 비번 kcp
채택

패치방법 문의

kag
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 264
그누보드5
답변대기