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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
상품 진열 슬라이더 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>
이런식으로 라네요.ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
전체 126,530 | RSS
QA 내용 검색

회원로그인

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