목록으로

swiper 질문드립니다. 채택완료

바나라바

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전 조회 3,418

답변 2

현재 왼쪽이미지처럼 설정이 되어있는데요

오른쪽 이미지처럼 왼쪽에 20px를 주고 다음 썸네일이 약간 보여서 사용자가 스와이프하라는 용도로 알 수 있게끔

만들고 싶은데요 ㅠㅠ... 도움부탁드립니다..

++ 추가로..

밑의 이미지처럼 페이저가 있는데..

저 absoulte시킨 페이저가 제가원하는 위치로 가려면 hidden 설정때문에 안보이더라구요 ㅠㅠ.. 이것도 방법 없을ㄲㅏ요 !?!ㅠㅠ

#swiper

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

답변 2개

정렬:

병원에서일해요

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

swiper 속성중 centermode라는걸 사용해보세요

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

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

핑크빈

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

링크나 소스코드를주세요.

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

답변에 대한 댓글 1개

�

바나라바

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

<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>

</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>

</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: {

<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>
                    
                </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>
                    
                </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: {