diff --git a/src/assets/img/swiper/left.png b/src/assets/img/swiper/left.png new file mode 100644 index 0000000..0b90065 Binary files /dev/null and b/src/assets/img/swiper/left.png differ diff --git a/src/assets/img/swiper/right.png b/src/assets/img/swiper/right.png new file mode 100644 index 0000000..4139f99 Binary files /dev/null and b/src/assets/img/swiper/right.png differ diff --git a/src/components/Trumbs/index.vue b/src/components/Trumbs/index.vue index f94deb3..d1d5f96 100644 --- a/src/components/Trumbs/index.vue +++ b/src/components/Trumbs/index.vue @@ -24,6 +24,26 @@ +
+ @@ -44,7 +64,18 @@ import 'swiper/css/free-mode' import 'swiper/css/navigation' // import required modules import { FreeMode, Navigation } from 'swiper' - +const preSwiper = () => { + const { activeIndex } = sw.value + if (activeIndex != 0) { + sw.value.slidePrev(500, false) + } +} +const nextSwiper = () => { + const { isEnd } = sw.value + if (!isEnd) { + sw.value.slideNext(500, false) + } +} const detailStore = useDetailStore() const { industry_id, hardware_id } = storeToRefs(detailStore) const myEmit = defineEmits(['onMySonFunc']) @@ -79,6 +110,12 @@ const onSwiper = swiper => { .trumbs_container { width: 100%; height: 108px; + .swiper-button-prev { + background: url(../../assets/img/swiper/left.png) no-repeat; + } + .swiper-button-next { + background: url(../../assets/img/swiper/right.png) no-repeat; + } .img_card { min-width: 194px; width: 194px; @@ -126,4 +163,9 @@ const onSwiper = swiper => { opacity: 1; } } +.story-navi--prev { + background: #283fe7; + width: 20px; + height: 20px; +} diff --git a/src/style.scss b/src/style.scss index b60ab5d..cbe8784 100644 --- a/src/style.scss +++ b/src/style.scss @@ -179,3 +179,9 @@ body { .ignore-min-width { min-width: 1280px; } + +.swiper-button-next:after, +.swiper-button-prev:after { + font-size: 0; + display: none; +}