메인 이미지 여러개를 같은 위치에 시간차로 출력하고 싶습니다.
관련링크
http://blocknara.co.kr
235회 연결
본문
main_banner1.png, main_banner2.png, main_banner3.png, main_banner4.png 이미지를 같은 자리에 일정한 시간 간격을 두고 차례대로 출력하게 하는 부분입니다.
(자료실의 테마에서 다운로드 받았어요.)
그런데 4개의 png 이미지들이 그냥 차례대로 출력이 되어 버리고 같은 자리에 출력이 안되는데요..
index.php
<?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
unslider.min.js가
http://blocknara.co.kr/theme/basic/js 경로에 없습니다.
theme/basic/js 폴더에 제대로 업로드 되어있는지 확인하세요
감사합니다
그런데 해당 파일들을 /theme/basic/js 폴더에 업로드 했는데도 안되는데요..
어떻게 하면 좋을까요..
다시 index.php 소스코드를 올려드립니다.
<?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>
답변을 작성하시기 전에 로그인 해주세요.
