고수 선배님 도와주세요. 영카트 메인 상품 슬라이드 2줄 이상 채택완료
안녕하세요. 고수 선배님들..
제가 영카트 메인 화면에 bxslider 를 이용해서 상품을 슬라이드 시키고 싶은데요.
세로로 2줄씩 진열시킨 후 슬라이드를 시키고 싶은데..
나열은 한줄씩만 되는 상태입니다.
owl carousel , swiper 등등도 사용해봤고 해봤는데 제 머리로는 좀 힘들어서
선배님들께 도움좀 청합니다
우선 현재 쓰고 있는 코드입니다
main.20.skin.php
Copy
$(document).ready(function(){
$('.sct_20').bxSlider2({
mode: 'horizontal',
slideWidth: 300,
minSlides: 2,
maxSlides: 8,
slideMargin: 5,
moveSlides: 1,
auto:true,
pager:true,
controls:false
});
});
관련 CSS
Copy
/* 상품 목록 스킨 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개
채택된 답변
+20 포인트
eyekiss
2년 전
아래와 같이 수정해보세요..
<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";
}
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인