X

제이쿼리(jQuery) 이미지 슬라이드쇼

제이쿼리(jQuery) 이미지 슬라이드쇼

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
&quot;<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>&quot;
which was inspired by the <a
href=”https://www.campaignmonitor.com/designer/?utm_source=sixrevisions&amp;utm_medium=banner&amp;utm_term=2&amp;utm_content=0003&amp;utm_campaign=Apr09Banners”>Campaign
Monitor</a> web interface.</p>
     </div>
   </div>
  </div>
  <!– Slideshow HTML –>

관련 게시물

플래시 포토 갤러리 23가지 모음

Leave a Comment