swiper 질문드립니다.
본문
현재 왼쪽이미지처럼 설정이 되어있는데요
오른쪽 이미지처럼 왼쪽에 20px를 주고 다음 썸네일이 약간 보여서 사용자가 스와이프하라는 용도로 알 수 있게끔
만들고 싶은데요 ㅠㅠ... 도움부탁드립니다..
++ 추가로..
밑의 이미지처럼 페이저가 있는데.. <ul class="swiper-wrapper">에 overflow hidden이 설정되어 있어서
저 absoulte시킨 페이저가 제가원하는 위치로 가려면 hidden 설정때문에 안보이더라구요 ㅠㅠ.. 이것도 방법 없을ㄲㅏ요 !?!ㅠㅠ
답변 2
링크나 소스코드를주세요.
<div class="swiper-container swiper_best">
<ul class="prdList swiper-wrapper">
<li class="swiper-slide">
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span><span class="discount_rate" data-price="{$product_custom}" data-sale="{$product_price}"></span></a>
<!--<span class="wish">{$list_wish_icon}</span>-->
</div>
<div class="description">
<ul class="spec">
<li class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="simple {$simple_desc|display}">{$simple_desc}</li>
<li class="price {$product_custom|display}"><span class="custom">{$price_unit_head}<strike>{$disp_product_custom}</strike></span></li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li>{$mileage_used}{$product_mileage}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};"></span>
<span class="chips" style="background-color:{$color};"></span>
</div>
</li>
<li class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
</ul>
<div class="btn_box">
<span class="cart_btn">{$basket_icon}</span>
<span class="wish_btn">{$list_wish_icon}</span>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span><span class="discount_rate" data-price="{$product_custom}" data-sale="{$product_price}"></span></a>
<!--<span class="wish">{$list_wish_icon}</span>-->
</div>
<div class="description">
<ul class="spec">
<li class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="simple {$simple_desc|display}">{$simple_desc}</li>
<li class="price {$product_custom|display}"><span class="custom">{$price_unit_head}<strike>{$disp_product_custom}</strike></span></li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li>{$mileage_used}{$product_mileage}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};"></span>
<span class="chips" style="background-color:{$color};"></span>
</div>
</li>
<li class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
</ul>
<div class="btn_box">
<span class="cart_btn">{$basket_icon}</span>
<span class="wish_btn">{$list_wish_icon}</span>
</div>
</div>
</li>
</ul>
<div class="swiper-pagination"></div>
</div>
$(function(){
var slide_item = new Swiper('.slide_item .swiper-container', {
slidesPerView: 2,
slidesPerGroup : 2,
spaceBetween: 10,
speed: 1000,
loop: false,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
swiper 속성중 centermode라는걸 사용해보세요
