제이쿼리 슬라이더 응용

동일하게 html 구성 후 제이쿼리 초기화 코드 복붙 > 클래스명 새로 지정하기

 var characterSwiper = new Swiper('.main_character .swiper-container', {
    slidesPerView: 'auto',
    spaceBetween: 30,
    scrollbar: {
      el: '.swiper-scrollbar',
    },

 

---

슬라이더 가운제부터 시작하게 하기

 

 

 var characterSlider = new Swiper('.main_character .swiper-container', {
    slidesPerView: 'auto',
    spaceBetween: 50,
    // active슬라이더 가운데로
    centeredSlides: true,
    scrollbar: {
      el: '.swiper-scrollbar',
    },

 

슬라이더가 첫번째부터시작

빈화면이 없도록 중간부터 시작할수있게 조정해보자

---

슬라이더 4번째 위치에서 시작

 

스와이퍼 옵션검색

swiper.slideTo(index, speed, runCallbacks)

 

슬라이더 시작 위치를 인덱스로 지정 

 

여기서 swiper 란 무엇인가?

 

스와이퍼에서 지정한 변수명으로

내 폼에 맞게 클래스 변경해준다.

var characterSlider = new Swiper

  var characterSlider = new Swiper('.main_character .swiper-container', {
    slidesPerView: 'auto',
    spaceBetween: 50,
    // active슬라이더 가운데로
    centeredSlides: true,
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
  characterSlider.slideTo(3, 0);

변수병을 새로 지정하여 옵션 설정 / runCallbacks 은 사용안하므로 생략

characterSlider.slideTo(3, 0);

 

 

4번째 슬라이더로 나오는것 확인 (제이쿼리 숫자 카운터는 0번부터 시작 / 0.1.2.3.)

---

스크롤바 조정

 

 

스크롤바 길이를 1200 으로 맞추기위해 

스크롤바를 컨테이너 밖으로 이너로 감아 빼주기. 

 

 

 

.main_character .inner {
  width: 1280px;
  margin: 0 auto;
}
.main_character .inner .swiper-scrollbar .swiper-scrollbar-drag {
  height: 1px;
  background: #ff3d44;
}

조정 swiper-scrollbar-drag 스크롤바 포인터 조정 

 

기존 스와이퍼 스크롤바 코드 이용

 

---

맨처음 시작 엑티브 위치 조정 해주기 

 

 

 

 

기존에 제공되는 스와이퍼 swiper-slide swiper-slide-active 엑티브 클래스에

트랜스폼을 이용해 위치조정 (위로 100픽셀 올라가라)

.main_character .swiper-slide-active .img_wrap {
  transform:  translateY(-100px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

 

 

부드럽게 올라갈수 있도록 상위 부모역영에   transition: all 0.5s;  을 건다

.main_character .swiper-slide .img_wrap  {
  border-radius: 60px;
  overflow: hidden;
  transition: all 0.5s;
}

 

 

height: aoto; 트렌디션 안먹음

---

텍스트 효과

 

 

 

텍스트 통통 튀는 효과 주기

easing 사이트에서 큐직베이즐 코드복사 > 트렌디션에 붙이기

  transition: all 0.8s cubic-bezier(0.65,0.05,0.36,1);

 

 

---

슬라이더 자동재생이 되어야 하는데 autoplay가 먹지않는다.

이유는 sliderTo 때문.

autoplay 옵션을 추가해주자 

 

추가 disableOnInteraction: false,

 

 

 

제이쿼리 최종 정리 

 

  var characterSlider = new Swiper('.main_character .swiper-container', {
    // 슬라이더 가로를 지정하기 위해서
    slidesPerView: 'auto',
    // 슬라이더 간격조정
    spaceBetween: 50,
    // active슬라이더 가운데로
    centeredSlides: true,
    autoplay: {
      delay: 1000,
      // slideTo 메서드로 강제이동시킨경우 인터렉션이 발생하므로 자동재생이 멈춤
      disableOnInteraction: false,
    },
    scrollbar: {
      // 슬라이더 밖으로 스크롤바를 뺏을 경우 부모이름 적어주기
      el: '.main_character .swiper-scrollbar',
    },
  });
  // (0부터 시작이기 때문) 4번쨰 슬라이드부터 보여주기 0초동안 강제이동으로 왼쪽부분 채우기
  characterSlider.slideTo(3, 0);