중간에 실수가 있었습니다.(ㅜ.ㅜ)

코드나 스크립트, 스타일은 모두 이상이 없으니 사용하셔도 됩니다.

삽입 태그(이미지는 여러분들 것을 넣어주시구요. 크기는 동일하게 만드신 것을 넣어주세요)

     <div class="full-slider">
            <div class="slider">
                <div><img src="images/pdslider1.jpg" width="100%"></div>
                <div><img src="images/pdslider2.jpg"></div>
                <div><img src="images/pdslider3.jpg"></div>
                <div><img src="images/pdslider4.jpg"></div>
                <div><img src="images/pdslider5.jpg"></div>
                <div><img src="images/pdslider6.jpg"></div>
                <div><img src="images/pdslider7.jpg"></div>
                <div><img src="images/pdslider8.jpg"></div>
            </div>
        </div>

내부 스크립트로 작성했을 때입니다.

<script>
    $(document).ready(function(){
      $('.slider').bxSlider({
        auto:true,
        mode:"horizontal",
        minSlides:3,
        maxSlides:3,
        slideWidth:466
      });
    });
  </script>

외부 스크립트 파일일 때는

$(document).ready(function(){

} 

안에

$('.slider').bxSlider({
        auto:true,
        mode:"horizontal",
        minSlides:3,
        maxSlides:3,
        slideWidth:466
      });

만 넣으시면 됩니다.

이전 버튼과 다음 버튼의 이미지는 첨부파일에 올려놓겠습니다만 직접 만들어 넣어보시는 것이 좋을 듯 합니다.

*{ position:relative; } 가 있다면 지워주시는데 position이 반드시 relative인 것은 따로 설정하셔야 합니다.

동영상에 설명은 했지만 여러분들의 작품에는 어떻게 들어갔는지 꼭 확인하시고 적용해보세요

  <style>
 /* 좌 우 화살표 컨트롤 css */
  .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width:50px; /* width: 32px; 기본 크기 */
    height:50px; /* height: 32px; 기본 크기 */
    text-indent: -9999px;
    z-index: 9999;
}
.bx-wrapper .bx-prev {
    left: 10px;
    background:black url(images/arrow-prev.png) no-repeat 10px 0;
    background-size:50%;
}
.bx-wrapper .bx-prev:hover,.bx-wrapper .bx-prev:focus{
    left: 10px;
     background:rgba(0,0,0,0.5) url(images/arrow-prev.png) no-repeat 10px 0;
    background-size:50%;
}

.bx-wrapper .bx-next {
    right: 10px;
    background:black url(images/arrow-next.png) no-repeat 10px 0;
    background-size:50%;
}
.bx-wrapper .bx-next:hover,.bx-wrapper .bx-next:focus {
    right: 10px;
     background:rgba(0,0,0,0.5) url(images/arrow-next.png) no-repeat 10px 0;
    background-size:50%;
}

/* 하단의 pagenation */
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: orange;
    width: 20px;
    transition:0.5s;
}

</style>

외부 스타일 파일일 때는

<style>과 </style>을 제외한 나머지 css만 입력하시면 되고

background이미지는 css외부 파일에 있지 않고 이전 위치해 있을 것이므로

../를 붙이는 것 잊지 마시구요

그럼 수고하셨습니다.