목록으로

슬라이더 어떻게 만들죠.. 채택완료

펭귄이다다

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

3년 전 조회 3,018

답변 3

이렇게 버튼슬라이드를 만들고싶은데 감이안잡히네요 하..

예상 수확일0000.00.00

온도

강수량

일조량

솔루션 이전 솔루션 보기

//css

.all{ white-space:nowrap; overflow: hidden; position: relative; }

.all_wrap{ width: 100%; display: inline-block; vertical-align: middle; }

이렇게 선언했는데 overflow:hidden으로 안보이게 만들었는데 어떻게 버튼이벤트를 줘야 다른게 나올까요?

#php #그누보드5

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

답변 3개

정렬:

채택된 답변

+20 포인트

CodeIU

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

3년 전

https://swiperjs.com/

라이브러리 사용하세요

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

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

코잔

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

3년 전

예시코드를 드리겠습니다

</p>

<p>// HTML</p>

<p><div id="section"></p>

<p><div class="slide-wr"></p>

<p><div class="visual_slide"></p>

<p><div class="slide_01 slide_bg"></div></p>

<p><div class="slide_02 slide_bg"></div></p>

<p><div class="slide_03 slide_bg"></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p>

</p>

<p>// CSS</p>

<p>#section {width:100%;height: calc(100vh - 207px);position:relative;overflow:hidden;margin:0 auto;} #section .slide-wr{width: 100%;height: 100%;} #section .visual_slide {width:100%;height: 100%;overflow:hidden;position:relative;} #section .visual_slide div {width:100%;float:left;height: 100%;} #section .visual_slide .slide_01{background: url('../img/main_banner.jpg') repeat-y right;background-size: cover;width: 100%;height: 100%;} #section .visual_slide .slide_02{background: url('../img/main_banner02.jpg') repeat-y right;background-size: cover;} /* #section .visual_slide .slide_03{background: url('../img/main_banner.jpg') repeat-y right;background-size: cover;} */ #section .visual_slide .slick-arrow{position:absolute;bottom:130px;width:142px;height:80px;z-index: 10;left: 20%;} #section .visual_slide .slick-arrow .prev{color:#fff;text-align: right;height: 100%;padding: 28px;font-size: 17px;} #section .visual_slide .slick-arrow .next{color:#fff;text-align: left;height: 100%;padding: 28px;font-size: 17px;} #section .visual_slide .slide-prev{background: url(../img/slick-prev.png) no-repeat 10% 50% rgba(0, 0, 0, 0.3);} #section .visual_slide .slide-next{left: calc(20% + 143px);background: url(../img/slick-next.png) no-repeat 89% 50% rgba(0, 0, 0, 0.3);}</p>

<p> </p>

<p>//JS</p>

<p>

JS는 아래분 말대로 Swiperjs 쓰시면 됩니다.

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

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