목록으로

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

바트컨트롤 7년 전 조회 7,762

답변 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 포인트

에이치H

7년 전

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

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

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

답변에 대한 댓글 2개

�

바트컨트롤

7년 전

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

아니시라면...어떠한방법이시죠ㅠㅠ?

�

바트컨트롤

7년 전

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

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

쥬노

4년 전

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

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

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

쥬노

4년 전

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

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

답변에 대한 댓글 1개

�

바트컨트롤

4년 전

과거글이군요
해결코드
[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]

과거글이군요
해결코드
[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>

</body>
</html>

[/code]

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

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

로그인

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

답변 3개

답변에 대한 댓글 2개

답변에 대한 댓글 1개

공유하기