bx-slider 관련하여 재차 질문드려봅니다.
본문
bx- pager를 sir.kr에 있는 슬라이드처럼 이미지 오른쪽 하단으로 변경하고 싶습니다.
질문을 통하여 이전에도 여쭤 보았었습니다.
그 결과, 답변자 분깨서는 CSS내 bx-pager의 position 값을 absolute로 지정하면 된다고 하셔서 수정하려고 보니, 해당 CSS의 bx-slider 부분은 아래와 같이 설정되어있었습니다.
그래서 재차 궁금하게 되어 여기에 다시 올리게 되었습니다.
초보에게 조언 부탁드릴께요.
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
vertical-align: bottom;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager-item {
font-size: 0;
line-height: 0;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
답변 1
.bx-wrapper .bx-pager { width:100% !important; text-align:right; bottom:20px; }
정도 주시면 비슷한 위치에 페이저가 들어갑니다.
혹시 CSS 가 안먹으시면, 우선순위 때문이니 !important 를 뒤에 붙여주시면 됩니다
해당 위치에 놓고 상세한 위치수정은 패딩을 이용하여 잡으시면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
