[jQuery] Responsive Slides 심플하고 가벼운 이미지 slider > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

심플하고 가벼운 이미지 슬라이더입니다.
PC와 모바일 모두 적용가능한 반응형 슬라이더입니다.
이미지 크기를 스스로 알아서 체크하므로 이용이 매우 편리합니다.

소스 다운로드 : http://responsiveslides.com/

소스를 다운로드후 파일을 업로드 합니다.
아래 jquery 파일의 경우엔 중복 사용시 작동 오류가 발생할 수 있으므로 적용시 이미 사용된 jquery 가 없는지 확인하세요.


<link rel="stylesheet" href="/plugin/ResponsiveSlides/ResponsiveSlides.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="/plugin/ResponsiveSlides/ResponsiveSlides.min.js"></script>


<script>
    // You can also use "$(window).load(function() {"
    // http://responsiveslides.com/
    $(function () {
    
        // Slideshow 1
        $(".rslides1").responsiveSlides({
            maxwidth: 800,  // 이미지 폭(px)
            speed: 1000
        });
    
    });
</script>
<ul class="rslides rslides1">
    <li><a href="view.asp?idx=1"><img src="img/01.png" alt=""></a></li>
    <li><a href="view.asp?idx=2"><img src="img/02.png" alt=""></a></li>
    <li><a href="view.asp?idx=3"><img src="img/03.png" alt=""></a></li>
    <li><a href="view.asp?idx=4"><img src="img/04.png" alt=""></a></li>
</ul>


참고자료
http://somgle.tistory.com/107