swiper 질문드립니다.

swiper 질문드립니다.

QA

swiper 질문드립니다.

본문

237248310_1624846699.0698.png

 

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

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

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

 

++ 추가로..

밑의 이미지처럼 페이저가 있는데..  <ul class="swiper-wrapper">에 overflow hidden이 설정되어 있어서

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

237248310_1624846970.4681.png

이 질문에 댓글 쓰기 :

답변 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: {

답변을 작성하시기 전에 로그인 해주세요.
전체 93
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT