슬라이드 배너 버튼 가운데정렬 도와주시기 부탁드립니다.
본문
안녕하세요!
배너 슬라이드버튼 가운데 정렬 문의드립니다.
아래 이미지와같이 슬라이드배너의 버튼이 살짝 왼쪽으로 치우쳐져 있습니다.
이거를 살짝 오른쪽으로 가져와서 가운데 정렬을 하고싶습니다.
코드는 아래와 같은데 어디에 손을대야 가운데로 오나요?
<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
add_javascript('<script src="'.G5_THEME_JS_URL.'/unslider.min.js"></script>', 10);
?>
<!--메인배너 {-->
<div id="main_bn_box">
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner_2.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner_3.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/welcome2.png" alt="메인베너" /></a></div>
</li>
</ul>
</div>
</div>
<!--} 메인배너-->
<script>
$(function() {
$("#main_bn").unslider({
speed: 700, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May bSreak non-responsive designs
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>
정말 감사합니다!
꼭좀 도와주세요 ㅠㅠ
답변 1
※ 몇가지 방법이 있겠으나,
<script> 태그 내에서 jQuery를 사용하여 동적으로 CSS를 적용하여 보세요.
<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>
- bottom 값으로 아래여백은 조정하세요.
답변을 작성하시기 전에 로그인 해주세요.