자동 슬리이드 쇼?.. 관련 도와주시면 감사합니다..ㅜ
본문
이미지가 3개씩 보여지고 위에 있는 점들을 클릭하면 다음 이미지들이 보이는데요...
클릭 없이도 자동으로 다음 점으로 넘어가서 보여지게 하려면 어떻게 해야하나요?ㅠ..
도와주시면 감사합니다.. (모바일버전 입니닷...)
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
<link href="<?php echo $latest_skin_url ?>/style.css?<?php echo time();?>" rel="stylesheet" type="text/css">
<style>
#news_area{position:relative;padding:0 10px;}
#news_area ul {margin-top:-20px;}
#news_area ul li a{float:left;width:30.3333%;margin:1.5%;}
#news_area ul li:after {display:block;visibility:hidden;clear:both;content:""}
#news_area .bx-controls{position:absolute;top:-40px;right:8px;width:100%;z-index:3000;text-align:right;}
#news_area .bx-wrapper .bx-pager-item{display:inline-block;}
#news_area .bx-wrapper .bx-pager{margin:0 auto;width:100%;}
#news_area .bx-wrapper {
position: relative;
margin: 0 auto 0px;
padding: 0;
}
#news_area .bx-wrapper .bx-pager.bx-default-pager a{
display:block;
margin-left:8px;
float:left;
width:20px;
height:20px;
overflow:hidden;
background:#eee;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 10px;
}
#news_area .bx-wrapper .bx-default-pager.bx-pager a{color:#eee;text-indent:-10000px}
#news_area .bx-wrapper .bx-default-pager.bx-pager a:hover, #news_area .bx-wrapper .bx-default-pager.bx-pager a.active{
background:#f64646; color:#f64646;
}
</style>
<script src="/js/jquery.bxslider.js"></script>
<script>
$(window).load(function(){
slider2= $('#news_area ul').bxSlider({
slideWidth: 1920,
pause: 2000,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
autoHover:false,
touchEnabled:false,
preventDefaultSwipeY: false,
pager:true,
auto:false,
controls:false,
slideMargin: 0
});
setTimeout(function(){
$("#news_area .bx-wrapper .bx-viewport #visual .slide").css("z-index","2999"); //z-index 문제
$(".bx-wrapper .bx-loading").hide();
$("#news_area").show();
},100);
$("#news_area").show();
});
</script>
<div class="lt_shopping" id="news_area">
<ul>
<?php for ($i=0; $i<count($list); $i++) { ?>
<?php if ($i % 3 ==0 ) { ?>
<li>
<?php } ?>
<?php
echo "<a href=\"".$list[$i]['wr_link1']."\"class='gallerys_img'> ";
if ($list[$i]['ca_name']) echo "<span class='ca_namepink'>" . $list[$i]['ca_name'] . "</span>";
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], 300, 300, false, true);
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'">';
} else {
$img_content = '<img src="'.G5_URL.'/img/no_img.png">';
}
echo $img_content;
echo "</a>";
?>
<?php
<?php if ($i % 9 ==8 ) { ?>
</li>
<?php } ?>
<?php } ?>
</ul>
</div>
답변 1
이거 옵션만 바꾸면 되는데 왜 배수처리를 했나요.. bxslide 옵션에보면
minSlides: 1,
maxSlides: 3,
moveSlides: 3,
auto:true,
좀더 아시려면 https://bxslider.com/options/ 정식 사이트가보면 되요
감사합니다..!!
답변을 작성하시기 전에 로그인 해주세요.
