bx-slider 관련하여 재차 질문드려봅니다.

bx-slider 관련하여 재차 질문드려봅니다.

QA

bx-slider 관련하여 재차 질문드려봅니다.

답변 1

본문

1994198100_1632928566.9959.png

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 를 뒤에 붙여주시면 됩니다

해당 위치에 놓고 상세한 위치수정은 패딩을 이용하여 잡으시면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 95
© SIRSOFT
현재 페이지 제일 처음으로