최신상품 슬라이더

최신상품 슬라이더

QA

최신상품 슬라이더

본문

 
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
add_javascript('<script src="'.G5_JS_URL.'/jquery.bxslider.js"></script>', 10);
 
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);
?>
shop.head.php에 이런식으로 swiper를 불러오고

아래처럼 index.php에 swiper를 적용을 했습니다.

 

 
<?php if($default['de_mobile_type3_list_use']) { ?>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="sct_wrap">
    <h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">최신상품</a></h2>
    <?php
    $list = new item_list();
    $list->set_mobile(true);
    $list->set_type(3);
    $list->set_view('it_img', true); // 이미지 표시
    $list->set_view('it_name', true);
    $list->set_view('it_cust_price', true);
    $list->set_view('it_price', true);
    $list->set_view('it_icon', true);
    $list->set_view('sns', false);
    echo $list->run();
    ?>
</div>
 </div>
</div>
<?php } ?>
 
<script>
jQuery(function($) {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 2,
        spaceBetween: 10, // 카드 간의 간격
        loop: true,
        autoplay: {
            delay: 5000, // 5초마다 슬라이드
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
});
</script>

 

아래는 main.10.skin.php 파일 입니다.

 

 
 
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);
?>
 
<?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 시작 { -->
<?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}\">\n";
        } else {
            echo "<ul class=\"sct sct_10\">\n";
        }
    }
 
    if($i % $this->list_mod == 0)
        $li_clear = ' sct_clear';
    else
        $li_clear = '';
 
    echo "<li class=\"sct_li{$li_clear}\"$li_width_style><div class=\"li_wr\">\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></li>\n";
}
 
if ($i > 0) echo "</ul>\n";
 
if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
<!-- } 상품진열 10 끝 -->
 

 

모바일 화면에서  slidesPerView 2면 1 줄에 2개만 보여야 하는데 main.10.skin.php 파일 때문인지 모르겠는데 한 줄에 2개씩 슬라이더가 없이 보이고 있습니다. 어떤 부분이 문제 일까요?

 

최종 목적은 모바일 화면에서 1줄에 2개가 보이고 슬라이더를 넘기면 다음 상품이 보이게 하는게 목적입니다.

이 질문에 댓글 쓰기 :

답변 1


<?php if($default['de_mobile_type3_list_use']) { ?>
<div class="swiper-container">
<div class="swiper-wrapper">
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(3);
$list->set_view('it_img', true);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', false);
 
$items = $list->run();
echo str_replace('<li class="sct_li', '<div class="swiper-slide"><li class="sct_li', $items);
echo str_replace('</li>', '</li></div>', $items);
?>
</div>
</div>
<?php } ?>

슬라이드 방식을 개별로 바꿔주시면 되실듯합니다. 좋은 하루되세요!

답변을 작성하시기 전에 로그인 해주세요.
전체 17,119
QA 내용 검색

회원로그인

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