킹바구니

swiper의 webcomponent를 활용하여 슬라이드를 구현하고 있었는데 슬라이드 앞뒤이동 버튼 색만 변경하려고하는데 !important를 줘도 아무리 안먹어서 뒤져보다가 정리함. 1. injectStyles 활용 먼저 html태그 swiper-container에 ref를 설정해주고 init값을 false로 둬야함. 그리고 watch에 ref가 들어왔을때 위와 같은 코드를 넣어주고 initialize()를 해주면 잘 적용된다. 참고로 onMounted는 안먹히니께 주의! 이게 공식 설명서에 있긴한데 묘하게 빠진 부분이 있어서 안먹힌단말이지..

원래 공식문서에서는 swiper.slideNext() 이렇게 쓰면 된다는데 안되는 이유가 뭘까 vue3이라서 그런가 아무튼 다른 방법을 찾아보았음. 1. swiper에 ref 걸어서 swiper가져오기 다음 const swiperRef = ref(); const slideNext = () => { // ref요소를 탐색해서 메소드 호출 swiperRef.value.$el.swiper.slideNext(); };