홈페이지만들기/Html_css&css3
html 슬라이딩 소스 참고하세요.
JUN나무
2017. 4. 18. 12:23
반응형
html 슬라이딩을 이곳 저곳 찾아보다 드디어 찾았습니다. 하단 네비가 thum 이미지로 되어있는 슬라이딩 찾다가 좋은 자료를 찾았습니다
모바일용이구요, pc에선 마우스 터치가 안되는데 모바일에선 잘 적용 됩니다.
demo 폴더 안에 html 파일들이 있습니다. 맞는 자료가 있으면 사용 하시면 됩니다. 여러가지 종류가 많이 있으니 참고 하셔도 괜찮을것 같습니다.^^
참고사이트 : http://flexslider.woothemes.com/thumbnail-controlnav.html
.js
----
1 2 3 4 5 6 7 | // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); | cs |
.html
------
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li data-thumb="slide1-thumb.jpg"> <img src="slide1.jpg" /> </li> <li data-thumb="slide2-thumb.jpg"> <img src="slide2.jpg" /> </li> <li data-thumb="slide3-thumb.jpg"> <img src="slide3.jpg" /> </li> <li data-thumb="slide4-thumb.jpg"> <img src="slide4.jpg" /> </li> </ul> </div> | cs |
[홈페이지만들기/Html_css&css3] - CSS style 컬러 기본설정
[홈페이지만들기/Html_css&css3] - vertical-align와 text-align CSS 활용하여 정렬하기
[홈페이지만들기/Html_css&css3] - html 순서 및 목록 만들기
[홈페이지만들기/Html_css&css3] - ul li 가로정렬로 메뉴만들기 (css가로정렬)
[홈페이지만들기/Html_css&css3] - div 프레임나누기
[홈페이지만들기/Html_css&css3] - html 창크기 조절(반응형코딩)
반응형