제이쿼리 슬라이더 용어정리 + 화살표 커스텀

기존코드 화살표 네비게이션 커스텀해주기

 

 

기존 코드에 이미 버튼이 들어가있지만

우리스타일로 바꾸기 위해 공통 클래스를 지정해준다.

 

 

 

 슬라이더 단추 이미지 하나로 양쪽 바꿔서 사용해주기

 

---

 기존 코드 확인후 위치 조절 

 

 

 

 

이미 margin-top 에 -22px 적용되어있으므로 중앙 배치를 위해 배너높이 확인후  margin-top:-31px; 적용

 

 

---

반대쪽 슬라이더 버튼 뒤집어서 사용해주기

 

.main_slider_wrap .swiper-button-next {
  left: auto;
  right: 30px;
  transform: rotateZ(180deg);
}

기존코드에 left 가 걸려있기때문에  right 가 적용안됨

이땐 left 를 auto 로 초기화해준다. (left는 aoto가 기본값)

 

---

페이지네이션 수정해주기 

 

페이지 네이션은 가변요소이기에 ( 슬라이더가 추가 될 수 있으므로)

기존 swiper 코드에 inline-block 이 적용되어있다. 

 

인라인 블럭 확인 

그럼 우리는   text-align: right;

만 적용하여 정렬해준다.

 

---

네비게이션 클릭시 배너가 넘어갈수 있게 클릭 요소 넣기

 

클릭요소 확인은 https://swiperjs.com/swiper-api#param-pagination-clickable 로 확인보자

 

객체 변경 해주기 

clickable

boolean

false

If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type

  var mainSlider = new Swiper('.main_slider', {
    direction: 'horizontal',
    loop: true,

    pagination: {
      el: '.swiper-pagination',
      clickable : true,
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
});

자바 스크립트에 clickable: true 코드 추가 

그럼 클릭시 배너가 넘어가는걸 확인할 수 있다. 

---

디자인에 맞게 커스텀 해주기

 

.main_slider_wrap .swiper-pagination span {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 1;
  transition: all 0.5s;
  border-radius: 5px;
}

.main_slider_wrap .swiper-pagination .swiper-pagination-bullet-active {
  background: #ffce32;
  width: 30px;
}

 

이떄 클래스 명은 기존코드를 사용한다. 

 

 

---

추가 효과들 적용해보기

 

코드복사 / 필요기능들은 swiper 에서 옵션기능을 찾아 넣어주자

 

 var mainSlider = new Swiper('.main_slider', {
    // 슬라이드 방향
    direction: 'horizontal',

    // 이동시간
    speed: 600,

    // 반복
    loop: true,

    // 투명도조절
    effect: 'fade',
    fadeEffect: {
     // 교차하는 슬라이드 모두 투명도 조절됨
    crossFade: true,
    },
    
    // 자동실행
    autoplay: {
      // 현재 슬라이드가 보이는 시간
      delay: 2000,
      // 슬라이더 안에서 인터넥션발생시 안멈추게 자동으로 넘어감
      disableOnInteraction: false,
    },

    // 네비게이션 클릭시 넘어가기
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });

 

추가 옵션 배너를 드래그로 넘겨도 넘어가게 하기 

 

 

// 마우스드래그 이벤트 막기    simulateTouch: false,

단 모바일 사용시 사용금지 (모바일은 터치로 넘기므로)