최신상품 슬라이더
본문
<?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);
?>
아래처럼 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 } ?>
슬라이드 방식을 개별로 바꿔주시면 되실듯합니다. 좋은 하루되세요!
!-->
답변을 작성하시기 전에 로그인 해주세요.