bxslider 복수 사용
본문
안녕하세요
bxslider를 한 페이지에서 여러개 사용하고 싶은데요
$('.slider').bxSlider({
auto: true,
speed: 500,
pause: 4000,
mode:'horizontal',
autoControls: true,
pager: true,
pagerType: 'short'
});
$('.pslide').bxSlider({
auto: true,
speed: 500,
pause: 4000,
mode:'horizontal',
autoControls: true,
pager: true,
pagerType: 'short'
});
});
이런식으로 클래스이름만 다르게 하여서 사용하려하는데 이렇게 하니 하나만 사용할때는 됐었는데 두
슬라이드 다 작동이 안되더라구여
혹시 여러개의 슬라이드를 중복해서 사용하고 싶을때 어떻게 해야할지 알려주실 수 있으신가요
답변 3
그렇게 쓰시면 돼는데요....
그렇게 쓰면 되는데요.
아마 다른 이유가 잇는 것 같습니다.
<!--bxslider start -->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="../../jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="../../jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="../../jquery_bxslider/images/hakmundang/1.png"></li>
<li><img src="../../jquery_bxslider/images/hakmundang/2.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/3.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/4.png" /></li>
</ul>
<script> $(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'vertical',
slideMargin: 5
});
});
</script>
<!--bxslider end -->
<!--bxslider start -->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="../../jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="../../jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />
<ul class="2bxslider">
<li><img src="../../jquery_bxslider/images/hakmundang/1.png"></li>
<li><img src="../../jquery_bxslider/images/hakmundang/2.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/3.png" /></li>
<li><img src="../../jquery_bxslider/images/hakmundang/4.png" /></li>
</ul>
<script> $(document).ready(function(){
$('.2bxslider').bxSlider({
mode: 'vertical',
slideMargin: 5
});
});
</script>
<!--bxslider end -->
처럼 <ul>태그에서도 클래스이름을 다르게 주어야 각각 작동합니다.
