swiper bullet에 이미지 넣기

swiper HTML

<div class="swiper mySwiper2">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

1) 단색 배경 적용

CSS

/* 선택안된 기본 불릿 */
.swiper-pagination-bullet {
  /* 원하는 이미지의 사이즈 */ 
  width: 50px;
  height: 50px;
  opacity: 1;
  background: transparent;
  border-radius: 0;
}

/* 선택된 불릿 */
.swiper-pagination-bullet-active {
  background: red;
  background: linear-gradient(315deg,#17a7c6,#1b39ab);  /* 적용 안됨 */
}

jQuery

var swiper = new Swiper(".mySwiper2", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '" style="background-image: url(../image/bar_'+ index +'.png)"></span>';
    },
  },
});

위 코드에서 background-color: linear-gradient가 안되는 이유는 url보다 linear-gradient가 먼저 오면 그라데이션은 적용이 안되기 때문이다 (개발자 도구로 봤을 때는 그라디언트가 있는 class가 뒤에 있었는데 어쨌든 적용이 안되는 모양)

*참고 사이트(그라디언트가 안되는 이유)https://coding-with-jina.tistory.com/43

 

2)그라데이션 배경(linear-gradient) 적용

CSS

.swiper-pagination-bullet {
  /* 원하는 불릿의 크기 */
  width: 50px;
  height: 50px;
  /* border, 배경색등의 효과를 줄 때 원하는 크기만큼 적용 */
  padding: 15px;
  opacity: 1;
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 50%;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  /* 불릿을 flex로 위치조정 하는 경우 margin으로 너비값 조절 */
  margin: 0 30px;
}
.swiper-pagination-bullet div {
  width: 100%;
  height: 100%;
  /* 부모 요소에 마진값을 주었기 때문에 중앙정렬을 위해 */
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
}
.swiper-pagination-bullet-active {
  background: linear-gradient(315deg,#17a7c6,#1b39ab);
  border: none;
  /* bullet에 border값을 준 경우 해당 padding+border두께값 */
  padding: 19px;
  position: relative;
}
.swiper-pagination-bullet-active div{
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* pagination의 위치 조정 */
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  top: 0;
  bottom: 0px;
  left: 0;
  /* 이 높이값만큼 페이지네이션의 높이가 정해지므로 불릿의 높이+패딩 등등의 값을 더해 적용 */
  width: 240px;
  height: 160px;
  /* 불릿을 두 줄로 만들기 위함 */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

jQuery

var swiper = new Swiper(".mySwiper2", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '"><div style="background-image:url(../image/bar_'+ index +'.png)"></div></span>';
    },
  },
});

현재 요청이 온 시안은 active 된 불릿의 배경이 그라데이션이 되어야 하기에 머리를 쥐어짰다

결론은 return하는 불릿의 마크업에 자식요소를 추가하고 거기에 이미지를 넣었다.

그리고 기존의 불릿요소에 그라데이션 배경을 주면 된다!!!!!!!!!!

다 해놓고 생각해보면 별 것 아니였는데 몇 시간을 헤멘건지..ㅠㅠㅠㅠ

 

여담이지만 동일한 기능을 하는 코드를 받았는데 박스슬라이더를 사용했었고 나는 스와이퍼로 구현하고 싶어서 이 뻘짓을 했다..

결과적으로 js의 길이도 줄어들고 원하는 결과물을 얻어서 만족!

 

결과물

 

 

스와이퍼 데모 중 pagination이 숫자인 것을 응용하였다

https://codesandbox.io/s/jx6vbg?file=/index.html 

Swiper - Pagination fraction - CodeSandbox

이미지 파일명은 넘버링을 해야 한다.