메인 이미지 여러개를 같은 위치에 시간차로 출력하고 싶습니다.

2018-12-09 (일) 00:50:06 2,639

main_banner1.png, main_banner2.png, main_banner3.png, main_banner4.png 이미지를 같은 자리에 일정한 시간 간격을 두고 차례대로 출력하게 하는 부분입니다.

(자료실의 테마에서 다운로드 받았어요.)

그런데 4개의 png 이미지들이 그냥 차례대로 출력이 되어 버리고 같은 자리에 출력이 안되는데요..

index.php

Copy
<?php
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_banner1.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_banner2.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_banner3.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_banner4.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 break 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>

그냥 main_banner1.png가 출력되고 그 다음줄에 main_banner2.png가 출력되어버리는데요..

왜 이런건지..

|

답변 3개

다시 index.php 소스코드를 올려드립니다.

Copy
<?php
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="http://blocknara.co.kr"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner1.png" alt="Merry Christmas~" /></a></div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr"><a href="http://blocknara.co.kr"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner2.png" alt="Merry Christmas~" /></a></div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr"><a href="http://blocknara.co.kr"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner3.png" alt="Merry Christmas~" /></a></div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr"><a href="http://blocknara.co.kr"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner4.png" alt="Merry Christmas~" /></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 break 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>

감사합니다

그런데 해당 파일들을 /theme/basic/js 폴더에 업로드 했는데도 안되는데요..

어떻게 하면 좋을까요..

unslider.min.js가 

http://blocknara.co.kr/theme/basic/js 경로에 없습니다.

theme/basic/js 폴더에 제대로 업로드 되어있는지 확인하세요

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