슬라이드 배너 버튼 가운데정렬 도와주시기 부탁드립니다. 채택완료
단단댄스
11개월 전
조회 1,137
안녕하세요!
배너 슬라이드버튼 가운데 정렬 문의드립니다.
아래 이미지와같이 슬라이드배너의 버튼이 살짝 왼쪽으로 치우쳐져 있습니다.
이거를 살짝 오른쪽으로 가져와서 가운데 정렬을 하고싶습니다.
http://sir.kr/data/editor/2411/3661047773_1732716046.7121.png" width="100%" />
코드는 아래와 같은데 어디에 손을대야 가운데로 오나요?
</p>
<p><?php</p>
<p>if (!defined('_INDEX_')) define('_INDEX_', true);</p>
<p>if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>
<p> </p>
<p>if (G5_IS_MOBILE) {</p>
<p> include_once(G5_THEME_MOBILE_PATH.'/index.php');</p>
<p> return;</p>
<p>}</p>
<p> </p>
<p>include_once(G5_THEME_PATH.'/head.php');</p>
<p> </p>
<p>add_javascript('<script src="'.G5_THEME_JS_URL.'/unslider.min.js"></script>', 10);</p>
<p>?></p>
<p> </p>
<p><!--메인배너 {--></p>
<p><div id="main_bn_box"></p>
<p> <div id="main_bn"></p>
<p> <ul class="bn_ul"></p>
<p> <li class="bn_bg1"></p>
<p> <div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner_2.png" alt="메인베너" /></a></div></p>
<p> </li></p>
<p> <li class="bn_bg1"></p>
<p> <div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner_3.png" alt="메인베너" /></a></div></p>
<p> </li></p>
<p> <li class="bn_bg1"></p>
<p> <div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/welcome2.png" alt="메인베너" /></a></div></p>
<p> </li></p>
<p> </ul></p>
<p> </div></p>
<p></div></p>
<p> </p>
<p><!--} 메인배너--></p>
<p><script></p>
<p>$(function() {</p>
<p> $("#main_bn").unslider({</p>
<p> speed: 700, // The speed to animate each slide (in milliseconds)</p>
<p> delay: 3000, // The delay between slide animations (in milliseconds)</p>
<p> keys: true, // Enable keyboard (left, right) arrow shortcuts</p>
<p> dots: true, // Display dot navigation</p>
<p> fluid: false // Support responsive design. May bSreak non-responsive designs</p>
<p> });</p>
<p> $('.unslider-arrow').click(function() {</p>
<p> var fn = this.className.split(' ')[1];</p>
<p> </p>
<p> // Either do unslider.data('unslider').next() or .prev() depending on the className</p>
<p> unslider.data('unslider')[fn]();</p>
<p> });</p>
<p> });</p>
<p></script></p>
<p>
정말 감사합니다!
꼭좀 도와주세요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
11개월 전
※ 몇가지 방법이 있겠으나,
<script> 태그 내에서 jQuery를 사용하여 동적으로 CSS를 적용하여 보세요.
</p>
<p><script>
$(function() {
var unslider = $("#main_bn").unslider({
speed: 700,
delay: 3000,
keys: true,
dots: true,
fluid: false
});
var $dots = $('.unslider-nav ol');
$dots.css({
'text-align': 'center',
'position': 'absolute',
'bottom': '10px',
'left': '50%',
'transform': 'translateX(-50%)'
});
});
</script></p>
<p>- bottom 값으로 아래여백은 조정하세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인