한페이지에 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 우선순의가 높아지니 각각 적용되지 않을까요
댓글을 작성하려면 로그인이 필요합니다.
아래와 같이 class명을 각각 다르게 지정해서 각각 실행해보세요
<div class="bxslider1"> ~~~
~~
<div class="bxslider2"> ~~~
~~
$('.bxslider1').bxSlider({
~~
");
$('.bxslider2').bxSlider({
~~
");
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가 본문에서 말한 bxslider.css 안에 확정되어있는 클래스명을 바꿀 수가 없어서
각기 다른 옵션 조절이 불가합니다
예를들면 1번 슬라이더엔 오토버튼을 없애고, 2번 슬라이더엔 오토버튼을 넣고 싶은데
이 오토버튼의 클래스 명이 .bx-wrapper .bx-pager 로 지정되어 있습니다
bxslider.css의 경우 클래스를 html에 넣어서 적용시킨것도 아니니 바꿀 수도 없구요