한페이지에 bxslider 2개 이상 꽂을 시 bxslider.css 조절 문의입니다
본문
크기가 다르고 버튼 위치나 유무가 다른 bxslider 2개를 한페이지에 꽂았을 때
bxslider.css를 바꿔서 각각의 슬라이더마다 설정을 달리 할 수 있나요?
bxslider.css를 보면 클래스명이 지정되어있습니다
.bx-wrapper , bx-pager, bx-pager-item 등등 지정되어있는 클래스명을 바꾸면 작동이 안되더군요
한페이지에 슬라이더를 하나만 쓰면 문제가 없지만
2개를 동시에 꽂아서 사용할 경우 클래스 명은 하나인데 바꿔야할 옵션은 2개가 되니까
서로 다른 옵션을 각각의 슬라이더에 적용시킬 수가 없습니다
혹시 방법이 있나요?
아니면 2개의 슬라이더를 하나는 비엑스슬라이더를 꽂고 하나는 슬릭슬라이더를 꽂아야할까요?
답변 3
그 페이지에서 각각 css 를 재정의 하는 방식으로 하시면 될 것 같습니다.
#box1 .bx-wrapper {...}
#box2 .bx-wrapper {...}
이런방식으로 각각 css 우선순의가 높아지니 각각 적용되지 않을까요
임시방편으로는 클래스는 중첩이 가능하니, 기존의 클래스명은 두시고, 각각의 슬라이더의 클래스 명을 다르게 해주셔도 됩니다.
2개의 슬라이더 클래스명을 다르게 한다 하더라도
제가 본문에서 말한 bxslider.css 안에 확정되어있는 클래스명을 바꿀 수가 없어서
각기 다른 옵션 조절이 불가합니다
예를들면 1번 슬라이더엔 오토버튼을 없애고, 2번 슬라이더엔 오토버튼을 넣고 싶은데
이 오토버튼의 클래스 명이 .bx-wrapper .bx-pager 로 지정되어 있습니다
bxslider.css의 경우 클래스를 html에 넣어서 적용시킨것도 아니니 바꿀 수도 없구요
아래와 같이 class명을 각각 다르게 지정해서 각각 실행해보세요
<div class="bxslider1">
~~~
~~
</div>
<div class="bxslider2">
~~~
~~
</div>
$('.bxslider1').bxSlider({
~~
");
$('.bxslider2').bxSlider({
~~
");
