SIR
목록으로

슬라이드 배너 버튼 가운데정렬 도와주시기 부탁드립니다. 채택완료

단단단댄스
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 1,487
답변 1
목록

안녕하세요!

배너 슬라이드버튼 가운데 정렬 문의드립니다.

 

아래 이미지와같이 슬라이드배너의 버튼이 살짝 왼쪽으로 치우쳐져 있습니다.

이거를 살짝 오른쪽으로 가져와서 가운데 정렬을 하고싶습니다.

 

3661047773_1732716046.7121.png

 

코드는 아래와 같은데 어디에 손을대야 가운데로 오나요?

 

Copy 
<?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개

채택된 답변
+20 포인트

※ 몇가지 방법이 있겠으나, 

  <script> 태그 내에서 jQuery를 사용하여 동적으로 CSS를 적용하여 보세요.

Copy 
<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 값으로 아래여백은 조정하세요.

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

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

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

로그인
🐛 버그신고