jQuery 이미지 슬라이더 BXSlider

먼저 html내에 외부링크를 추가하여 해당링크의 소스를 불러와 슬라이더를 적용 시킨다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

 

그 이후 스크립트 부분도 추가해야 한다.

<script>
	$(document).ready(function(){
    		$('.slider').bxSlider();
        });
</script>        

그리고 스크립트 부분에 몇가지 옵션을 추가한다.

$(document).ready(function(){
	$(.'bxsilder').bxSlider({
    		auto : true, //자동으로 애니메이션 시작
            speed : 500, //애니메이션 속도
            pause : 5000, //애니메이션 유지시간(1000 = 1초)
            mode : 'horizontal', //슬라이드 모드('fade','horizontal',vertcal' 이 있음)
            autoControls : true , //시작 및 중지버튼이 보여짐
            pager : true , //페이지표시 보여짐
            captions : true // 이미지 위에 텟스트를 넣을 수 있음
        });
    });

 

실제 적용할 소스코드는

<div>
	<ul class="bxslider">
    	<li><a href="#"><img src="##" alt="img1"></a></li>
        <li><a href="#"><img src="##" alt="img2"></a></li>
        <li><a href="#"><img src="##" alt="img3"></a></li>
    </ul>
</div>

위와 같은 방식으로 원하지 이미지와 링크를 슬라이더 형식으로 출력 할 수 있다.