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 을 이용해서 처리한적이 있습니다.
헉! 혹시 position을 이용해서 처리하셨다는부분이
absolute로 겹쳐놓고 z-index로 뿌리신다는 말씀인가요!?
아니시라면...어떠한방법이시죠ㅠㅠ?
아! 해결했습니다...
구성옵션에 슬라이드리로드 시키면되더군요!
그래도 답변 달아주셨으니! 감사합니다!
혹시 슬라이드 리로드 하는 방법을 자세히 알수좀 있을까요? 저도 똑같은 상황인데 어떻게 해결이 안되서요...
과거글이군요
해결코드
$(".tab1").click(function() {
mySlider.reloadSlider();
});
전체코드
<!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>
정말 감사합니다. 평안한 주말되세요.
답변을 작성하시기 전에 로그인 해주세요.
