중간에 실수가 있었습니다.(ㅜ.ㅜ)
코드나 스크립트, 스타일은 모두 이상이 없으니 사용하셔도 됩니다.
삽입 태그(이미지는 여러분들 것을 넣어주시구요. 크기는 동일하게 만드신 것을 넣어주세요)
<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외부 파일에 있지 않고 이전 위치해 있을 것이므로
../를 붙이는 것 잊지 마시구요
그럼 수고하셨습니다.