제이쿼리(jQuery) 이미지 슬라이드쇼
jQuery를 이용한 이미지 슬라이드쇼 입니다. 어느정도 기본적인 테그 사용법만 아셔도 손쉽게 수정 사용 하실 수 있습니다. 화려한 이미지 슬라이드쇼는 아니지만 손십게 소스를 수정 사용할 수 있다는 것이 장점 같네요. jQuery 슬라이드쇼의 모든소스를 압축파일로 다운 받으실 수 있습니다.
https://sixrevisions.com/demo/slideshow/final.html 데모페이지에서 어떻게 출력되는지 살펴 보시고 https://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/ 상세 설정 방법으로 이동 하시면 자세한 설정 방법과 데모 소스를 압축 파일로 다운 받을 수 있습니다.
아래는 데모소스의 일부분입니다. 별로 어려워보이지도 않죠~~ 텍스트 부분과 링크그리고 이미지 정도만 수정 하셔도 바로 사용할 수 있겠죠~~
| <!– Slideshow HTML –> <div id=”slideshow”> <div id=”slidesContainer”> <div class=”slide”> <h2>Web Development Tutorial</h2> <p><a href=”https://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/“><img src=”img/img_slide_01.jpg” alt=”An image that says Install X A M P P for wordpress.” width=”215″ height=”145″ /></a>If you’re into developing web apps, you should check out the tutorial called “<a href=”https://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/“>Using XAMPP for Local WordPress Theme Development</a>” which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p> </div> <div class=”slide”> <h2>Grunge Brushes, Anyone?</h2> <p><a href=”https://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/”><img src=”img/img_slide_02.webp” width=”215″ height=”145″ alt=”A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions.” /></a>In this layout, I used <a href=”https://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/”>SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p> <p> </div> <div class=”slide”> <h2>How About Some Awesome Grunge Textures?</h2> <p><a href=”https://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/”><img src=”img/img_slide_03.webp” width=”215″ height=”145″ alt=”A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions.” /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p> <p>You can head over to the <a href=”https://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/”>Grunge Extreme</a> page to download the texture set or check out Six Revisions’ <a href=”https://sixrevisions.com/category/freebies/”>freebie section</a> for even more goodies!</p> </div> <div class=”slide”> <h2>’Tis the End, My Friend.</h2> <p><a href=”https://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/”><img src=”img/img_slide_04.webp” width=”215″ height=”145″ alt=”Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.” /></a>This is the last slide. Hit the left arrow control to go back to the other slides.</p> <p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called "<a href=”https://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/”>How to Create a Slick and Clean Button in Photoshop</a>" which was inspired by the <a href=”https://www.campaignmonitor.com/designer/?utm_source=sixrevisions&utm_medium=banner&utm_term=2&utm_content=0003&utm_campaign=Apr09Banners”>Campaign Monitor</a> web interface.</p> </div> </div> </div> <!– Slideshow HTML –> |