브라우저 제목

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

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

 

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

     <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외부 파일에 있지 않고 이전 위치해 있을 것이므로

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

 

그럼 수고하셨습니다.

 

 

제목 날짜
ㅁ낭ㄹㄴ망ㄹ 1 2020.06.17
웹디자인 기능사 모의 평가 자료 file 2020.04.04
요청하신 일러스트 밑그림 자료입니다. file 2020.03.21
gtq자료 2019.05.27
자료 file 2018.12.11
버튼이 있는 슬라이딩 file 2018.08.30
자격증 세로 네비게이션 2018.08.19
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
woff변환 프로그램 file 2018.06.18
태그와 css정리 목록 file 2018.06.15
연산자와 네비고정, 네비 메뉴 file 2018.06.12
네비 드롭(click)2 file 2018.06.11
네비 드롭(click)1 file 2018.06.11
bxslider 연결 및 기본 옵션 file 2018.06.07
jquery 로그인 팝업 2018.06.06
jquery 시작 동영상 file 2018.06.06
태그 정리 file 2018.06.04
21일차 동영상은 제작하지 않았습니다. 2018.05.08
레이아웃6 두번째 file 2018.05.04
태그 목록