bx 슬라이더 질문좀 할게요!
본문
탭구조로
3개의 슬라이더를 가져오려고하는데
단순 텍스트만 했을땐 탭구조가 먹히는데
bx슬라이더하면 2,3번째가 안먹히드라구요..
조언좀 부탁드릴게요...
<!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>
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script>
$(function() {
$('#bxslider1').bxSlider({
auto: true,
autoControls: true
stopAutoOnClick: true,
pager: true,
slideWidth: 600
});
$('#bxslider2').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600
});
$('#bxslider3').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600
});
$('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>
<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>
<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>
<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>
</body>
</html>
답변 3
css에서 탭메뉴를 display: none을 하는 경우에 생기는 현상이 저도 있엇습니다.
이것을 그냥 position 을 이용해서 처리한적이 있습니다.
혹시 슬라이드 리로드 하는 방법을 자세히 알수좀 있을까요? 저도 똑같은 상황인데 어떻게 해결이 안되서요...
정말 감사합니다. 평안한 주말되세요.
답변을 작성하시기 전에 로그인 해주세요.