친절한효자손 취미생활

제이쿼리(jQuery)를 활용한 이미지 슬라이드 방법입니다. 엄청 쉽습니다. 자바스크립트를 잘 몰라도 됩니다. 저도 편리하게 이용하고 있습니다. 제이쿼리는 일종의 자바스크립트 꾸러미라고 생각하시면 좋을 것 같습니다. 그리고 수많은 능력자분들이 만든 제이쿼리 꾸러미 중 하나가 바로 오늘 소개해드릴 bxSlider 입니다.



▲https://bxslider.com


먼저 bxslider의 설치과정을 거쳐야 합니다. 하지만 설치라고해서 뭐 프로그램을 설치하는 과정이 아닌, html, javasctipt의 외부 링크를 추가하는 것 뿐입니다. 그래야 해당 링크의 주소에서 소스를 불러와 적용할 수 있기 때문입니다. 위에서 보시는 것 처럼 인스톨 버튼을 누르시면 해당 페이지로 이동하시게 됩니다.


두가지를 추가하시면 됩니다. HTML 내에서의 head 태그 안쪽에 (보통은 title 태그 아래에) 아래의 외부스타일 링크를 추가해 주시면 됩니다.


그리고 스크립트 부분도 추가해 주시면 됩니다. 마찬가지로 head 태그 안쪽에 배치해 주시면 됩니다.


이렇게 해주시면 됩니다. 마지막으로 스크립트 부분에 실행문을 몇가지 넣어주시면 되는데, 이것은 bxslider 에서 제공하는 강력한 기능 중 하나입니다. 이렇게 사용하시면 됩니다.


$(document).ready(function () {

    $('.bxslider').bxSlider({ // 클래스명 주의!

        auto: true, // 자동으로 애니메이션 시작

        speed: 500,  // 애니메이션 속도

        pause: 5000,  // 애니메이션 유지 시간 (1000은 1초)

        mode: 'horizontal', // 슬라이드 모드 ('fade', 'horizontal', 'vertical' 이 있음)

        autoControls: true, // 시작 및 중지버튼 보여짐

        pager: true, // 페이지 표시 보여짐

        captions: true, // 이미지 위에 텍스트를 넣을 수 있음

    });

});


가장 기본형태 입니다. 어떻게 나오는지 한번 살펴보도록 하겠습니다.



고양이1cat1.png

고양이2cat2.png

고양이3cat3.png


여기에 고양이 사진을 사이즈를 동일하게하여 3개를 올려놓겠습니다. 저 사랑스러운 녀석들을 슬라이드를 진행하려고 합니다. 이미지 주소는 마우스로 오른쪽 버튼을 누르면 쉽게 얻을 수 있습니다. 그리고 html의 body 안쪽에는 ul과 li 태그를 활용해서 이미지를 넣어봤습니다.


<div>

    <ul class="bxslider">

        <li><a href="#"><img src="이미지주소" alt="" title="이미지1"></a></li>

        <li><a href="#"><img src="이미지주소" alt="" title="이미지2"></a></li>

        <li><a href="#"><img src="이미지주소" alt="" title="이미지3"></a></li>

    </ul>

</div>


이런 형태로 들어오게 될 것입니다. 중요한 포인트는 ul에 class값을 부여했고, 클래스명은 bxslider 에서 제공하는 자바스크립트 클래스명과 동일해야 한다는 것 입니다. 저 위에 클래스명 주의라고 표시해둔 주석 처리된 부분입니다.


See the Pen bxslider by rgy0409 (@rgy0409) on CodePen.

이렇게 하여 완성된 bxslider의 모습 입니다. 이미지를 조금 작은것을 써서 여백이 좀 보이는데 대부분 슬라이드 이미지는 크니까 큰 이미지를 사용하시면 알아서 맞게 배치가 될 것입니다. 끝.



"친절한효자손 취미생활" 을 검색!


댓글 보기