做外汇网站代理,学做宝宝衣服网站好,网页设计实训报告,自己干装修怎么找活效果展示
实现了自带切换按钮在图片外部实现了自定义的切换按钮 背景
在项目中使用到了轮播图#xff0c;实现点击上一张下一张时实现循环显示#xff0c;同时预览两个图片#xff0c;并加以文字对图片的说明。
设计
使用 Swiper 插件#xff0c;可以实现当前这个需求。…效果展示
实现了自带切换按钮在图片外部实现了自定义的切换按钮 背景
在项目中使用到了轮播图实现点击上一张下一张时实现循环显示同时预览两个图片并加以文字对图片的说明。
设计
使用 Swiper 插件可以实现当前这个需求。核心代码就两块一块布局一块样式。参考官网发现有很多种实现方式本文选择单页面引入的方式。 也可以选择 **Swiper Element**的形式 文本链接如下https://swiperjs.com/element 版本 Vue 3.3.4 Swiper 11.0.4 Node 20.9.0
页面代码 如果遇到按钮无法生效页面样式等问题排查引入的 CSS 是否正确 安装 Swiper npm install swiper页面布局
templatediv classoutboxswiperlooptrue:modulesmodules:slides-per-view2:space-between50navigation:pagination{ clickable: true }swiperonSwiperslideChangeonSlideChangeclassinboxswiper-slideimg src/images/1.jpg /第一个/swiper-slideswiper-slideimg src/images/2.jpg /第二个/swiper-slideswiper-slideimg src/images/3.jpg /第三个/swiper-slideswiper-slideimg src/images/4.jpg /第四个/swiper-slideswiper-slideimg src/images/5.jpg /第五个/swiper-slide/swiper/div!-- 如果需要导航按钮 --div classswiper-button-prev slotbutton-prev clickswiperPrev/divdiv classswiper-button-next slotbutton-next clickswiperNext/div/template
script// import Swiper core and required modulesimport { Navigation, Pagination, Scrollbar, A11y } from swiper/modules;// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from swiper/vue;// Import Swiper stylesimport swiper/css;import swiper/css/navigation;import swiper/css/pagination;import swiper/css/scrollbar;// Import Swiper stylesexport default {components: {Swiper,SwiperSlide,},setup() {const onSwiper (swiper) {console.log(swiper);};const onSlideChange () {console.log(slide change);};return {onSwiper,onSlideChange,modules: [Navigation, Pagination, Scrollbar, A11y],};},methods: {swiperNext() {const swiper document.querySelector(.swiper).swiper;swiper.slideNext();},swiperPrev() {const swiper document.querySelector(.swiper).swiper;swiper.slidePrev();},
}};
/script
style
.outbox{position: relative;padding: 0 50px;width: 1000px;
}
.inbox{margin-top: 50px;position: initial;
}
/style
