반응형
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 창크기 조절(반응형코딩)
반응형
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| css경로 설정 및 스타일시트적용 (0) | 2017.05.01 |
|---|---|
| 2017의 새로운 10종류의 무료 글꼴 / 무료폰트 (0) | 2017.04.20 |
| 스타일시트 CSS Style margin (0) | 2017.02.16 |
| CSS 링크의 color와 background-color (0) | 2017.02.13 |
| CSS style 컬러 기본설정 (0) | 2017.02.09 |
