网站建设制作设计公司佛山,开发网站的基本过程,百度广告 网站域名 已验证,北京seo排名厂家效果图
可以实现自动轮播#xff0c;3种切换方式#xff1a;直接滑动图片、点击两侧按钮、点击底部按钮 体验链接:http://website.livequeen.top 实现
一、引入依赖
1、控制台引入依赖 npm install glidejs/glide 2、在css中引用
style scoped
import glidejs/g…效果图
可以实现自动轮播3种切换方式直接滑动图片、点击两侧按钮、点击底部按钮 体验链接:http://website.livequeen.top 实现
一、引入依赖
1、控制台引入依赖 npm install glidejs/glide 2、在css中引用
style scoped
import glidejs/glide/dist/css/glide.core.min.css;
......
/style 3、在js代码中引用
import Glide from glidejs/glide;二、页面布局
templatebody!-- glide轮播图 --div classglidediv classglide__track data-glide-eltrack!-- 轮播图集合 --div classglide__slides!-- 轮播图item --div classglide__slide v-for(item, index) in glideList!-- 中心动态展示文字及按钮 --div classslide-captionh1{{item.h1}}/h1h3{{item.h3}}/h3button classexplore-btn探索更多/button/div!-- 虚化背景 --div classbackdrop/div!-- 图片 --img :srcitem.src alt //div/div/div!-- 左右切换控件 --div classglide__arrows data-glide-elcontrolsbutton classglide__arrow glide__arrow--left data-glide-dir/buttonbutton classglide__arrow glide__arrow--right data-glide-dir/button/div!-- 底部切换控件 --div classglide__bullets data-glide-elcontrols[nav]button classglide__bullet :class{active: nowActive index} :data-glide-dir index v-for(item, index) in glideList/button/div/div/body
/template
style scoped
import glidejs/glide/dist/css/glide.core.min.css;/* 轮播图样式 */
.glide {position: relative;z-index: 50;
}.glide__slide {display: flex;align-items: center;justify-content: center;
}.glide__slide img {width: 100vw;max-width:100%;height: 100vh;object-fit: cover; /* 等比例缩放 */
}/* 轮播图背景虚化遮罩 */
.backdrop {background: rgba(42, 42, 42, 0.69);z-index: 60;position: absolute;height: 100%;width: 100%;left: 0;top: 0;opacity: 0.3;
}.glide__arrows {position: absolute;top: 50%;width: 100%;display: flex;align-items: center;justify-content: space-between;z-index: 40;
}.glide__arrow {width: 40px;height: 40px;margin: 0px 20px;background: rgba(255,255,255,0.3);border: 1px white;border-radius: 5px;color: white;font-size: 18px;cursor: pointer;
}.glide__arrow:hover{background: rgba(255,255,255,0.5);
}.glide__arrow:active{background: rgba(255,255,255,0.7);
}.glide__bullets {position: absolute;bottom: 15px;width: 100%;display: flex;align-items: center;justify-content: center;z-index: 40;
}.glide__bullet {width: 35px;height: 5px;margin: 0 5px;border: none;
}.glide__bullet.active {background-color: darkorange;
}/* 这部分是内部其他组件的样式 */
.slide-caption {position: absolute;z-index: 70;color: #e7e9ec;text-align: center;max-width: 60vw;pointer-events: auto;
}.slide-caption * {opacity: 0;
}.slide-caption h1 {font-size: 54px;font-weight: 600;
}.slide-caption h3 {font-size: 24px;margin: 48px 0;
}.explore-btn {padding: 14px 32px;background-color: #FB6354;border: 0;border-radius: 4px;color: #e7e9ec;font-size: 18px;cursor: pointer;outline: none;
}/style 三、glide参数配置
script
import Glide from glidejs/glide;import glide1 from ../src/assets/img/glide1.jpg;
import glide2 from ../src/assets/img/glide2.jpg;
import glide3 from ../src/assets/img/glide3.jpg;export default {data() {return {// vue组件实例对象glide: ,// 当前glide轮播图序号nowActive: 0,// glide配置参数glideConfig: {startAt: 0, // 一开始显示哪一张幻灯片autoplay: 4000, // 自动播放时间间隔hoverpause: false, // 鼠标停留幻灯片上时停止自动播放},// glide-数据列表glideList: [{h1: 科技推动人类进步研发引领实业发展。,h3: 自力更生是中华民族自立于世界民族之林的奋斗基点自主创新是我们攀登世界科技高峰的必由之路。,src: glide1,type: img},{h1: 科技推动人类进步研发引领实业发展。,h3: 自力更生是中华民族自立于世界民族之林的奋斗基点自主创新是我们攀登世界科技高峰的必由之路。,src: glide2,type: img},{h1: 科技推动人类进步研发引领实业发展。,h3: 自力更生是中华民族自立于世界民族之林的奋斗基点自主创新是我们攀登世界科技高峰的必由之路。,src: glide3,type: img}]};},mounted () {this.init()},methods: {/*** 初始化*/init () {this.initGlide();},/*** 初始化glide*/initGlide () {this.glide new Glide(.glide, this.glideConfig);// 及时更新底部bullet的选中状态this.glide.on(move, () {this.nowActive this.glide.index;});this.glide.mount();}}
};
/script
