슬라이더 이미지가 3갠데 나머지 1개가 더 뜹니다,공백으로
본문
서버에서 말고 html상에서는 정상적으로 3개의 슬라이더만 뜨는데 무엇이 원인인지 도저히 찾을수가없습니다..
도와주세요~~~
<<<<<<<<<<<<<<<<<<<<<<<<<<<<index.php>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<?php
?>
if (G5_IS_MOBILE) {
include_once(G5_MSHOP_PATH.'/index.php');
return;
}
define("_INDEX_", TRUE);
include_once(G5_SHOP_PATH.'/shop.head.php');
?>
<!-- 메인이미지 시작 { -->
<?php echo display_banner('메인', 'mainbanner.10.skin.php'); ?>
<!-- } 메인이미지 끝 -->
<div id="visual">
<a href="#"><img src="../shop/img/jaeil/main01.jpg"></a>
<a href="#"><img src="../shop/img/jaeil/main02.jpg"></a>
<a href="#"><img src="../shop/img/jaeil/main03.jpg"></a>
<!--<div class="vimg"><a href="#"><img src="img/main05.jpg" alt=""></a></div>
<div class="vbtn">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<a href="#" class="play">play</a>
<a href="#" class="stop">stop</a>
</div>플러그인으로 들어오면서 다 필요없다.-->
<script src="../js/slider_800.js"></script>
</div><!--#visual-->
<?php if($default['de_type1_list_use']) { ?>
<!-- 히트상품 시작 { -->
<section class="sct_wrap">
<header>
<h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">디지털컬러복합기 BEST</a></h2>
<p class="sct_wrap_hdesc"></p>
</header>
<?php
$list = new item_list();
$list->set_type(1);
$list->set_view('it_img', true);
$list->set_view('it_id', true);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
</section>
<!-- } 히트상품 끝 -->
<?php } ?>
<?php if($default['de_type2_list_use']) { ?>
<!-- 추천상품 시작 { -->
<section class="sct_wrap">
<header>
<h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">디지털흑백복합기 BEST</a></h2>
<p class="sct_wrap_hdesc"></p>
</header>
<?php
$list = new item_list();
$list->set_type(2);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
</section>
<!-- } 추천상품 끝 -->
<?php } ?>
<?php if($default['de_type3_list_use']) { ?>
<!-- 최신상품 시작 { -->
<section class="sct_wrap">
<header>
<h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">소형레이저컬러복합기 BEST</a></h2>
<p class="sct_wrap_hdesc">최신상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_type(3);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
</section>
<!-- } 최신상품 끝 -->
<?php } ?>
<?php if($default['de_type4_list_use']) { ?>
<!-- 인기상품 시작 { -->
<section class="sct_wrap">
<header>
<h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">무한잉크 BEST</a></h2>
<p class="sct_wrap_hdesc">인기상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_type(4);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
</section>
<!-- } 인기상품 끝 -->
<?php } ?>
<?php
include_once(G5_SHOP_PATH.'/shop.tail.php');
?>
<<<<<<<<<<<<<<<<<<<<<<<<<<css>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
#visual{width:960px;height:438px;position:relative; margin-left:25px; margin-bottom:80px;}
/*slidesjs 버튼,사이트에 가면 css값이 옵션에 적혀있다.*/
/*visual relative를 기준으로 배치시킨다.*/
.slidesjs-previous{display:block;width:10px;height:15px;background:rgba(0,0,0,0.5);text-indent:-9999px;position:absolute;top:186px;left:20px;z-index:50;}
.slidesjs-next{display:block;width:10px;height:15px;background:rgba(0,0,0,0.5);text-indent:-9999px;position:absolute;top:186px;right:20px;z-index:50;}
/*페이저*/
.slidesjs-pagination{position:absolute;bottom:0;right:20px;}
.slidesjs-pagination li{float:left;margin-left:2px;}
.slidesjs-pagination li a{display:block;width:12px;height:12px;background:#d5d5d5;text-indent:-9999px;}
.slidesjs-pagination li a.active{background:#c9ae8c;}
.slidesjs-play{display:block;width:12px;height:12px;background:url(../img/btns_play.gif) no-repeat;text-indent:-9999px;position:absolute;right:0;bottom:0;}
.slidesjs-stop{display:block;width:12px;height:12px;background:url(../img/btns_play.gif) no-repeat -12px 0;text-indent:-9999px;position:absolute;right:0;bottom:0;}
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<js>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$(function(){//실행문 시작
})//실행문 끝
$("#visual").slidesjs({
width:960,
height:412,
navigation:{//좌우버튼 세팅
active:true, //사용하면 true,사용하지않으면 false
effect:"fade"//좌우버튼을 눌렀을때 발생되는 효과
//"slide" 또는 "fade"
},pagination:{//페이저버튼 세팅
active:true, //사용하면 true,사용하지않으면 false
effect:"fade" //페이저버튼을 눌렀을 때 발생되는 효과,slide or fade
//소스코드에 보면 css가 보인다
},play:{//스탑,플레이버튼 세팅
active:true,//사용하면 true,사용하지 않으면 false
effect:"fade",
auto:true,//오토면 true 안쓰면 false
interval:3000//이미지 전환되는 간격(속도 1초)
//swap 겹쳐서 쓰지않고 플레이버튼과 스탑버튼을 둘다 보고 싶으면 swape을 false로
},effect:{//화면전환효과
fade:{
speed:3000,
// [number] Speed in milliseconds of the fade animation.
crossfade: true//크로스페이드 기본적용 되어있다,기본적으로 들어가야 한다 공백에 이미지가 안보이기 때문에
// [boolean] Cross-fade the transition.
}
}
});//요건만 해도 하나로 뭉치네,개발자도구에서 보면 페이저랑 이런거 다 생기네,플러그인의 효과
//옵션 start옵션있다.어떤이미지가 먼저 시작하는지
//네비게이션 버튼설정할때
//플러그인은 대부분 정해져있다,오픈소스로 주되 수정해서 써도 되는것도 있고,넣어놓은 동작만하는 동작도 있다.
//여기서는 효과가 slide or fade 2가지가 있다. 2가지 있다.
})//실행문 끝
답변 1
<!--<div class="vimg"><a href="#"><img src="img/main05.jpg" alt=""></a></div>
<div class="vbtn">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
이게 슬라이더 리스트 부분인 것 같은데 리스트가 4번까지 있으니 3개의 이미지 이후에 하나가 더 들어가는 겁니다. 저 항목을 빼주시면 자연스레 3개만 뜨게 됩니다.