swiper 질문입니다.

swiper 질문입니다.

QA

swiper 질문입니다.

본문

swiper 작업도중

궁금한게 생겼습니다.

 

1888899041_1594728214.0416.png

사진출처: 인스타그램

 

사진을 보시면 맨 끝이 반절로 잘려있고 화살표를 클릭하면 슬라이드가 되게 구현되어 있습니다.

 

이부분을 한번 구현할려고 하는데 저는

 

1888899041_1594728274.831.png

 

일자로 안되고 이렇게 되버립니다... 어떻게 하면 인스타그램처럼 할수 있을까요??

 

html 코드


            <div class="topic_wrap swiper-container" style="width:72%;">
                <div class="swiper-wrapper">
                    <div class="slide_sbox swiper-slide" style="width:100%;">
                <ul>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic"><span class="to_span1">#피로개선</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic2"><span class="to_span2">#홍삼</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic3"><span class="to_span3">#간 건강</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic4"><span class="to_span4">#기억력</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic53"><span class="to_span4">#항산화</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic54"><span class="to_span4">#혈행 개선</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic55"><span class="to_span4">#콜레스테롤</span></a></li>
                    <li><a href="http://agricshare.com/bbs/board.php?bo_table=list_topic56"><span class="to_span4">#칼슘</span></a></li>
                </ul>
                    </div><!--//카테고리&토픽-->
                        </div>
                            </div>

 

css 코드


.topic_wrap{position:relative; background:#fff;margin:20px 0 20px 1px;width:100%;height:135px;clear:both;}
.topic_wrap ul{margin:0 0 0 13px;text-align:center;font-size:11px;font-weight:bold;}
.topic_wrap ul li{width:67px;height:67px;float:left;border-radius:50%;margin:0 7px;box-shadow:1px 2px 10px #eee;float:left;}
.topic_wrap ul li:hover{background-color:#f8f8f8;}
.topic_wrap ul li .to_span1{display:inline-block;color:#9e9c9c;padding-top:28px;}
.topic_wrap ul li .to_span2{display:inline-block;color:#9e9c9c;padding-top:28px;}
.topic_wrap ul li .to_span3{display:inline-block;color:#9e9c9c;padding-top:28px;}
.topic_wrap ul li .to_span4{display:inline-block;color:#9e9c9c;padding-top:28px;}

 

js 코드


var swiper = new Swiper('.swiper-container', {            
        nextButton: '.swiper-button-next',
           prevButton: '.swiper-button-prev',
           slidesPerView:1,
           spaceBetween: 30,
           loop: true
    });

이 질문에 댓글 쓰기 :

답변 1

height: 135px로 되어 있어서 wraping이 되고 있습니다.

 

overflow와 white-space등을 섞어서 사용해 보세요..

 

아마도 ul li는 인스타처럼 반만 가려지는 형태는 안될 것 같은 느낌입니다.  

 

div로 javascript까지 써야 될 것 같습니다.

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

회원로그인

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