고수 선배님 도와주세요. 영카트 메인 상품 슬라이드 2줄 이상
본문
안녕하세요. 고수 선배님들..
제가 영카트 메인 화면에 bxslider 를 이용해서 상품을 슬라이드 시키고 싶은데요.
세로로 2줄씩 진열시킨 후 슬라이드를 시키고 싶은데..
나열은 한줄씩만 되는 상태입니다.
owl carousel , swiper 등등도 사용해봤고 해봤는데 제 머리로는 좀 힘들어서
선배님들께 도움좀 청합니다
우선 현재 쓰고 있는 코드입니다
main.20.skin.php
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);
add_javascript('<script src="'.G5_JS_URL.'/jquery.bxslider2.js"></script>', 10);
// 장바구니 또는 위시리스트 ajax 스크립트
add_javascript('<script src="'.G5_JS_URL.'/shop.list.action.js"></script>', 10);
?>
<?php if($config['cf_kakao_js_apikey']) { ?>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="<?php echo G5_JS_URL; ?>/kakaolink.js"></script>
<script>
// 사용할 앱의 Javascript 키를 설정해 주세요.
Kakao.init("<?php echo $config['cf_kakao_js_apikey']; ?>");
</script>
<?php } ?>
<div class="st_20_wr">
<?php
$li_width = intval(100 / $this->list_mod);
$li_width_style = ' style="width:'.$li_width.'%;"';
for ($i=0; $row=sql_fetch_array($result); $i++) {
if ($i == 0) {
if ($this->css) {
echo "<ul class=\"{$this->css} main_item\">\n";
} else {
echo "<ul class=\"main_item sct sct_20\">\n";
}
}
echo "<li class=\"sct_li\"><div class=\"sct_li_wr\">\n";
echo"<div class=\"img_wr\">";
if ($this->href) {
echo "<div class=\"sct_img\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";
}
if ($this->view_it_img) {
echo get_it_image($row['it_id'], $this->img_width, $this->img_height, '', '', stripslashes($row['it_name']))."\n";
}
if ($this->href) {
echo "</a></div>\n";
}
if ($this->view_it_id) {
echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";
}
if ($this->href) {
echo "<div class=\"sct_txt\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";
}
if ($this->view_it_name) {
echo stripslashes($row['it_name'])."\n";
}
if ($this->href) {
echo "</a></div>\n";
}
if ($this->view_it_price) {
echo "<div class=\"sct_cost\">\n";
echo display_price(get_price($row), $row['it_tel_inq'])."\n";
echo "</div>\n";
}
if ($this->view_it_icon) {
echo "<div class=\"sct_icon_wr\">".item_icon2($row)."</div>\n";
}
echo "</div></li>\n";
}
if ($i > 0) echo "</ul>\n";
if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
<!-- } 상품진열 30 끝 -->
</div>
<script>
$(document).ready(function(){
$('.sct_20').bxSlider2({
mode: 'horizontal',
slideWidth: 300,
minSlides: 2,
maxSlides: 8,
slideMargin: 5,
moveSlides: 1,
auto:true,
pager:true,
controls:false
});
});
</script>
관련 CSS
/* 상품 목록 스킨 20 */
.st_20_wr {display: inline-block;background:#fff;padding:0px;position:relative;border-bottom:0px solid #e5e5e5;webkit-text-size-adjust:100%}
.sct_20 {margin:0;display:inline-block;}
.sct_20 .sct_li {position:relative;float:left;margin-bottom:25px;padding:0 5px 0 ;}
.sct_20 .img_wr{position:relative;text-align:left;}
.sct_20 .sct_img img {max-width:100%;height:auto}
.bx-pager {text-align:center;height:20px}
.bx-pager .bx-pager-item {display:inline-block;margin:5px;padding-top:10px;padding-bottom:10px}
.bx-pager .bx-pager-link {display:block;width:8px;height:8px;text-indent:-999px;overflow:hidden;background:#adadad;border-radius:5px}
.bx-pager .active {background:#000}
.sct_20 .sct_star {margin:10px 0 5px}
.sct_20 .sct_txt {margin:5px 0;font-size:1.083em}
.sct_20 .sct_cost {font-weight:bold}
부탁드립니다.
감사드립니다
!-->!-->답변 1
아래와 같이 수정해보세요..
<li> 태그 하나에 상품 2개를 나열하는 방법입니다.
직접 해보지 않아서 될지 모르겠네요..
if ($i % 2 == 0) {
echo "<li class=\"sct_li\"><div class=\"sct_li_wr\">\n";
}
<<중간 생략>>
echo "</div>\n";
if ($i % 2 == 1) {
echo "</li>\n";
}
답변을 작성하시기 전에 로그인 해주세요.