상품 진열 슬라이더 1줄에 보여줄 갯수 버그? 문제 입니다.

상품 진열 슬라이더 1줄에 보여줄 갯수 버그? 문제 입니다.

QA

상품 진열 슬라이더 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>
이런식으로 라네요.ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
전체 17,101
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT