목록으로

swiper 질문입니다. 채택완료

roro11

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

5년 전 조회 2,198

답변 1

swiper 작업도중

궁금한게 생겼습니다.

사진출처: 인스타그램

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

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

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

html 코드

</p>

<p>            <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="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic"><span</a> class="to_span1">#피로개선</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic2"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic2"><span</a> class="to_span2">#홍삼</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic3"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic3"><span</a> class="to_span3">#간 건강</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic4"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic4"><span</a> class="to_span4">#기억력</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic53"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic53"><span</a> class="to_span4">#항산화</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic54"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic54"><span</a> class="to_span4">#혈행 개선</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic55"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic55"><span</a> class="to_span4">#콜레스테롤</span></a></li>

                    <li><a href="<a href="http://agricshare.com/bbs/board.php?bo_table=list_topic56"><span" target="_blank" rel="noopener noreferrer">http://agricshare.com/bbs/board.php?bo_table=list_topic56"><span</a> class="to_span4">#칼슘</span></a></li>

                </ul>

                    </div><!--//카테고리&토픽-->

                        </div>

                            </div></p>

<p>

css 코드

</p>

<p>.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;}</p>

<p>

js 코드

</p>

<p>var swiper = new Swiper('.swiper-container', {            

        nextButton: '.swiper-button-next',

           prevButton: '.swiper-button-prev',

           slidesPerView:1,

           spaceBetween: 30,

           loop: true

    });</p>

<p>

#그누보드5 #swiper #css #js #퍼블리싱