최신상품 슬라이더 채택완료

Copy
<?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를 적용을 했습니다.

Copy
<?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 파일 입니다.

Copy
<?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\">&lt;".stripslashes($row['it_id'])."&gt;</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개

채택된 답변
+20 포인트
Copy
<?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 } ?>

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고