테스트 사이트 - 개발 중인 베타 버전입니다

고수 선배님 도와주세요. 영카트 메인 상품 슬라이드 2줄 이상 채택완료

JN나비 2년 전 조회 1,111

안녕하세요. 고수 선배님들..

제가 영카트 메인 화면에 bxslider 를 이용해서 상품을 슬라이드 시키고 싶은데요.

 

세로로 2줄씩 진열시킨 후 슬라이드를 시키고 싶은데..

나열은 한줄씩만 되는 상태입니다.

 

owl carousel , swiper 등등도 사용해봤고 해봤는데 제 머리로는 좀 힘들어서

선배님들께 도움좀 청합니다

 

우선 현재 쓰고 있는 코드입니다

 

main.20.skin.php

</p>

<p><?php

if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가</p>

<p>// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

add_stylesheet('<link rel="stylesheet" href="'.G5_MSHOP_SKIN_URL.'/style.css">', 0);

add_javascript('<script src="'.G5_JS_URL.'/jquery.bxslider2.js"></script>', 10);</p>

<p>// 장바구니 또는 위시리스트 ajax 스크립트

add_javascript('<script src="'.G5_JS_URL.'/shop.list.action.js"></script>', 10);

?></p>

<p><?php if($config['cf_kakao_js_apikey']) { ?>

<script src="<a href="https://developers.kakao.com/sdk/js/kakao.min.js"></script>" target="_blank" rel="noopener noreferrer">https://developers.kakao.com/sdk/js/kakao.min.js"></script></a>

<script src="<?php echo G5_JS_URL; ?>/kakaolink.js"></script>

<script>

    // 사용할 앱의 Javascript 키를 설정해 주세요.

    Kakao.init("<?php echo $config['cf_kakao_js_apikey']; ?>");

</script>

<?php } ?>

<div class="st_20_wr">

    <?php

    $li_width = intval(100 / $this->list_mod);

    $li_width_style = ' style="width:'.$li_width.'%;"';</p>

<p>    for ($i=0; $row=sql_fetch_array($result); $i++) {

        if ($i == 0) {

            if ($this->css) {

                echo "<ul class=\"{$this->css} main_item\">\n";

            } else {

                echo "<ul class=\"main_item sct sct_20\">\n";

            }

        }</p>

<p>        echo "<li class=\"sct_li\"><div class=\"sct_li_wr\">\n";</p>

<p>        echo"<div class=\"img_wr\">";</p>

<p>        if ($this->href) {

            echo "<div class=\"sct_img\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";

        }</p>

<p>        if ($this->view_it_img) {

            echo get_it_image($row['it_id'], $this->img_width, $this->img_height, '', '', stripslashes($row['it_name']))."\n";

        }</p>

<p>        if ($this->href) {

            echo "</a></div>\n";

        }</p>

<p>

        if ($this->view_it_id) {

            echo "<div class=\"sct_id\"><".stripslashes($row['it_id'])."></div>\n";

        }</p>

<p>        if ($this->href) {

            echo "<div class=\"sct_txt\"><a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";

        }</p>

<p>        if ($this->view_it_name) {

            echo stripslashes($row['it_name'])."\n";

        }</p>

<p>        if ($this->href) {

            echo "</a></div>\n";

        }</p>

<p>        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_wr\">".item_icon2($row)."</div>\n";

        }</p>

<p>        echo "</div></li>\n";

    }</p>

<p>    if ($i > 0) echo "</ul>\n";</p>

<p>    if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";

    ?>

<!-- } 상품진열 30 끝 -->

</div></p>

<p><script>

$(document).ready(function(){

  $('.sct_20').bxSlider2({

      mode: 'horizontal',

    slideWidth: 300,

    minSlides: 2,

    maxSlides: 8,

    slideMargin: 5,

    moveSlides: 1,

    auto:true,

    pager:true,

    controls:false

  });

});

</script></p>

<p>

 

관련 CSS

</p>

<p>/* 상품 목록 스킨 20 */</p>

<p>.st_20_wr {display: inline-block;background:#fff;padding:0px;position:relative;border-bottom:0px solid #e5e5e5;webkit-text-size-adjust:100%}

.sct_20 {margin:0;display:inline-block;}</p>

<p>.sct_20 .sct_li {position:relative;float:left;margin-bottom:25px;padding:0 5px 0 ;}

.sct_20 .img_wr{position:relative;text-align:left;}

.sct_20 .sct_img img {max-width:100%;height:auto}

.bx-pager {text-align:center;height:20px}

.bx-pager .bx-pager-item {display:inline-block;margin:5px;padding-top:10px;padding-bottom:10px}

.bx-pager .bx-pager-link {display:block;width:8px;height:8px;text-indent:-999px;overflow:hidden;background:#adadad;border-radius:5px}

.bx-pager .active {background:#000}

.sct_20 .sct_star {margin:10px 0 5px}

.sct_20 .sct_txt {margin:5px 0;font-size:1.083em}

.sct_20 .sct_cost {font-weight:bold}

 

부탁드립니다. 

 

감사드립니다 

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

답변 1개

채택된 답변
+20 포인트
e
2년 전

아래와 같이 수정해보세요..

  • 태그 하나에 상품 2개를 나열하는 방법입니다.

    직접 해보지 않아서 될지 모르겠네요..

     

    if ($i % 2 == 0) {

      echo "

  • \n"; }

     

    <<중간 생략>>

     

    echo "

    \n";

    if ($i % 2 == 1) {

      echo "

  • \n";

    }

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

    답변에 대한 댓글 1개

    J
    JN나비
    2년 전
    아니 이런...고수분이...감사합니다!! 새해 복 많이 받으세요! 두번 받으세요!

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

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

    로그인