테스트 사이트 - 개발 중인 베타 버전입니다

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

하우두 4년 전 조회 1,849

1994198100_1632928566.9959.pnghttps://sir.kr/data/editor/2109/1994198100_1632928566.9959.png" />

bx- pager를 sir.kr에 있는 슬라이드처럼 이미지 오른쪽 하단으로 변경하고 싶습니다.

 

질문을 통하여 이전에도 여쭤 보았었습니다.

그 결과, 답변자 분깨서는 CSS내 bx-pager의 position 값을 absolute로 지정하면 된다고 하셔서 수정하려고 보니, 해당 CSS의 bx-slider 부분은 아래와 같이 설정되어있었습니다.

 

그래서 재차 궁금하게 되어 여기에 다시 올리게 되었습니다.

 

초보에게 조언 부탁드릴께요.

 

</p>

<p>.bx-wrapper .bx-pager,</p>

<p>.bx-wrapper .bx-controls-auto {</p>

<p>  position: absolute;</p>

<p>  bottom: -30px;</p>

<p>  width: 100%;</p>

<p>}</p>

<p>/* PAGER */</p>

<p>.bx-wrapper .bx-pager {</p>

<p>  text-align: center;</p>

<p>  font-size: .85em;</p>

<p>  font-family: Arial;</p>

<p>  font-weight: bold;</p>

<p>  color: #666;</p>

<p>  padding-top: 20px;</p>

<p>}</p>

<p>.bx-wrapper .bx-pager.bx-default-pager a {</p>

<p>  background: #666;</p>

<p>  text-indent: -9999px;</p>

<p>  display: block;</p>

<p>  width: 10px;</p>

<p>  height: 10px;</p>

<p>  margin: 0 5px;</p>

<p>  outline: 0;</p>

<p>  -moz-border-radius: 5px;</p>

<p>  -webkit-border-radius: 5px;</p>

<p>  border-radius: 5px;</p>

<p>}</p>

<p>.bx-wrapper .bx-pager.bx-default-pager a:hover,</p>

<p>.bx-wrapper .bx-pager.bx-default-pager a.active,</p>

<p>.bx-wrapper .bx-pager.bx-default-pager a:focus {</p>

<p>  background: #000;</p>

<p>}</p>

<p>.bx-wrapper .bx-pager-item,</p>

<p>.bx-wrapper .bx-controls-auto .bx-controls-auto-item {</p>

<p>  display: inline-block;</p>

<p>  vertical-align: bottom;</p>

<p>  *zoom: 1;</p>

<p>  *display: inline;</p>

<p>}</p>

<p>.bx-wrapper .bx-pager-item {</p>

<p>  font-size: 0;</p>

<p>  line-height: 0;</p>

<p>}</p>

<p> </p>

<p>/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */</p>

<p>.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {</p>

<p>  text-align: left;</p>

<p>  width: 80%;</p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
d
4년 전

</p>

<pre>
<code>.bx-wrapper .bx-pager { width:100% !important; text-align:right; bottom:20px; }</code></pre>

<p>

정도 주시면 비슷한 위치에 페이저가 들어갑니다.

혹시 CSS 가 안먹으시면, 우선순위 때문이니 !important 를 뒤에 붙여주시면 됩니다

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인