② swiper_slide 기본 슬라이드 (+내비게이션버튼 / 스크롤바 )

② 기본 슬라이드(+내비게이션버튼 / 스크롤바)

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

 

↑ 위에 기본 링크 추가해주고, 

 

HTML

    <div class="swiper-container">

 

        <div class="swiper-wrapper">

 

            <div class="swiper-slide">

                <img src= "이미지파일.png"  alt="Image 1" class="img-normal">

                <img src="이미지파일.png" alt="Image 1 Hover" class="img-hover"> <!-- hover 했을때 이미지 있을 경우만 -->

            </div>

 

            <div class="swiper-slide">

                <img src= "이미지파일.png"  alt="Image 2" class="img-normal">

                <img src="이미지파일.png" alt="Image 2 Hover" class="img-hover"> <!-- hover 했을때 이미지 있을 경우만 -->

            </div>

 

            <div class="swiper-slide">

                <img src= "이미지파일.png"  alt="Image 2" class="img-normal">

                <img src="이미지파일.png" alt="Image 2 Hover" class="img-hover"> <!-- hover 했을때 이미지 있을 경우만 -->

            </div>

 

        </div>

 

        <!-- 네비게이션 버튼 -->

        <div class="swiper-button-next"></div>  <!-- 다음 버튼 (오른쪽에 있는 버튼) -->

        <div class="swiper-button-prev"></div> <!-- 이전 버튼 -->

 

 

        <!-- 스크롤바 -->

        <div class="swiper-scrollbar"></div>  <!-- 추가함 -->

 

    </div>

 

 

CSS

/* image */

.swiper-container {

    width: 1323px;

    height:489px;

}

.swiper-slide {

    width: 728px;

    text-align: center;

    display: flex; /* 내용을 중앙정렬 하기위해 flex 사용 */

    align-items:center; /* 위아래 기준 중앙정렬 */

    justify-content:center; /* 좌우 기준 중앙정렬 */

    filter: blur(4px);

}

.swiper-slide-active {

    justify-content: center;

    padding: 0 20px;

    margin: 0 30px;

    filter: none;

}

/* img hover */

.swiper-slide img {

    width: 100%; /* 이미지 크기를 슬라이드에 맞게 설정 */

    transition: opacity 0.5s ease; /* 부드러운 효과를 위한 트랜지션 */

}

.img-hover {

    display: none; /* 호버 이미지를 기본적으로 숨김 */

    position: absolute; /* 절대 위치 지정 */

}

.swiper-slide:hover .img-normal {

    display: none; /* 호버 시 기본 이미지 숨김 */

}

.swiper-slide:hover .img-hover {

    display: block; /* 호버 시 호버 이미지 표시 */

}

/* prev,next button */

.swiper-container .swiper-button-prev, .swiper-button-next {

    width: 50px; /* 버튼 너비 설정 */

    height: 50px; /* 버튼 높이 설정 */

    line-height: 50px; /* 텍스트 세로 정렬 */

    text-align: center; /* 텍스트 가로 정렬 */

    padding: 0 50px;

}

 

________________________________________________________________________________________________

+ 스크롤바 커스텀

/* scrollbar */

/* 스크롤바 커스텀 */   

.swiper-scrollbar{

    display: none;

}

/* 스크롤바의 길이 및 위치 설정 */

.swiper-container-horizontal > .swiper-scrollbar {

    width: 50%; /* 스크롤바 길이 설정 */

    left: 25%; /* 스크롤바를 가운데 정렬 */

    height: 8px;

    background: rgb(255, 255, 255); /* 스크롤바 배경 색상 */

}

/* 스크롤바 드래그 핸들의 색상 설정 */

.swiper-scrollbar-drag {

    background-color: #6B98E5; /* 스크롤바 색상 설정 */

}

 

JS

new Swiper('.swiper-container', {

  // 스크롤바 설정하기

  scrollbar : {

    el : '.swiper-scrollbar',

    draggable: true,

  },

  pagination : { // 페이징 설정

    el : '.swiper-pagination',

    clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동

  },

  navigation : { // 네비게이션 설정

    nextEl : '.swiper-button-next', // 다음 버튼 클래스명

    prevEl : '.swiper-button-prev', // 이번 버튼 클래스명

  },

});

new Swiper('.swiper-container', {

    scrollbar: {

        el: '.swiper-scrollbar',

        draggable: true,

    },

    navigation: {

        nextEl: '.swiper-button-next',

        prevEl: '.swiper-button-prev',

    },

    centeredSlides: true, // 활성 슬라이드를 중앙에 위치시키기

    slidesPerView: '2', // 한 번에 보여지는 슬라이드 수를 자동으로 설정

    spaceBetween: 30, // 슬라이드 사이의 간격 설정

    on: {

        slideChangeTransitionStart: function () {

            this.slides.forEach(slide => {

                slide.style.filter = "blur(4px)"; // 슬라이드 변경 시작 시 블러 처리

            });

        },

        slideChangeTransitionEnd: function () {

            this.slides[this.activeIndex].style.filter = "none"; // 슬라이드 변경 종료 시 블러 해제

        }

    }

});