상품 진열 슬라이더 1줄에 보여줄 갯수 버그? 문제 입니다.
본문
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/swiper/swiper.min.css">', 0);
add_javascript('<script src="'.G5_JS_URL.'/swiper/swiper.min.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 } ?>
<!-- 메인상품진열 10 시작 { -->
<div class="swiper-container sct_10">
<div class="swiper-wrapper">
<?php
for ($i=0; $row=sql_fetch_array($result); $i++) {
echo "<div class=\"swiper-slide\">\n"; // 슬라이드 시작
if ($this->href) {
echo "<div class=\"sct_img\"><a href=\"{$this->href}{$row['it_id']}\">\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\" title=\"".htmlspecialchars(stripslashes($row['it_name']))."\">\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\">".item_icon($row)."</div>\n";
}
if ($this->view_sns) {
$sns_top = $this->img_height + 10;
$sns_url = G5_SHOP_URL.'/item.php?it_id='.$row['it_id'];
$sns_title = get_text($row['it_name']).' | '.get_text($config['cf_title']);
echo "<div class=\"sct_sns\" style=\"top:{$sns_top}px\">";
echo get_sns_share_link('facebook', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/facebook.png');
echo get_sns_share_link('twitter', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/twitter.png');
echo get_sns_share_link('googleplus', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/gplus.png');
echo get_sns_share_link('kakaotalk', $sns_url, $sns_title, G5_MSHOP_SKIN_URL.'/img/sns_kakao.png');
echo "</div>\n";
}
echo "</div>\n"; // 슬라이드 끝
}
if ($i > 0) echo "</div>\n"; // swiper-wrapper 닫기
if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
</div> <!-- swiper-wrapper 끝 -->
</div> <!-- swiper-container 끝 -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2, // 모바일 화면에서는 한 번에 보여줄 카드 수
spaceBetween: 10, // 카드 간의 간격
loop: true, // 무한 루프 설정
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
<!-- } 상품진열 10 끝 -->
모바일 페이지에서 보여주게 코드를 이런식으로 만들었는데
slidesPerView: 2 라고 적었는데 왜 인지 모르겠는데 자꾸 1개만 보여주네요..
어떤 부분이 문제일까요?
혹시 몰라 스타일.css도 올려봅니다.
/* 상품 목록 스킨 10 */
.sct_10{margin:10px }
.sct_10 .sct_li {float:left;text-align:left;padding:10px;}
.sct_10 .sct_li .li_wr{position:relative;}
.sct_10 .sct_img{vertical-align:top}
.sct_10 .sct_img img{width:100%;height:auto;}
.sct_10 .sct_clear{clear:both}
.sct_10 .sct_id{margin:5px 10px;font-size:0.92em;color:#666 }
.sct_10 .sct_txt{margin:10px 0;font-size:15px; font-weight:400; }
.sct_10 .sct_cost{display: block; font-weight:bold;margin:5px 0; font-size:16px; color: red; border-top: 2px solid #e5e5e5;}
.sct_10 .sct_sns{margin:10px 0}
.sct_10 .sct_icon {margin:5px 0 }
.swiper-container { width: 100%; max-width: 1200px; }
.swiper-slide {width: auto;}
답변 1
자문 자답이 되어 버렸는데 Swiper 초기화를 해야 한다네요..
<script>
document.addEventListener('DOMContentLoaded', function () {
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 10000, // 10초 (10000ms) 간격
disableOnInteraction: false, // 사용자 인터랙션 후에도 autoplay가 계속 진행되도록 설정
},
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.