上海网站开发哪家好薇,浏览器入口,虚拟空间app,ps教学网站制作步骤在有限空间内#xff0c;循环播放同一类型的图片、文字等内容 1.如何使用#xff1f;
结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的#xff0c;需要放在el-carousel-item标签中。默认情况下#xff0c;在鼠标 hover 时底部的指示器… 在有限空间内循环播放同一类型的图片、文字等内容 1.如何使用
结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的需要放在el-carousel-item标签中。默认情况下在鼠标 hover 时底部的指示器时就会触发切换。通过设置trigger属性为click可以达到点击触发的效果。
templatediv classblockspan classdemonstration默认 Hover 指示器触发/spanel-carousel height150pxel-carousel-item v-foritem in 4 :keyitemh3 classsmall{{ item }}/h3/el-carousel-item/el-carousel/divdiv classblockspan classdemonstrationClick 指示器触发/spanel-carousel triggerclick height150pxel-carousel-item v-foritem in 4 :keyitemh3 classsmall{{ item }}/h3/el-carousel-item/el-carousel/div
/templatestyle.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 150px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n1) {background-color: #d3dce6;}
/style
2.轮播指示器
可以将指示器的显示位置设置在容器外部
//indicator-position属性定义了指示器的位置。默认情况下
//它会显示在走马灯内部设置为outside则会显示在外部设置为none则不会显示指示器。templateel-carousel indicator-positionoutsideel-carousel-item v-foritem in 4 :keyitemh3{{ item }}/h3/el-carousel-item/el-carousel
/templatestyle.el-carousel__item h3 {color: #475669;font-size: 18px;opacity: 0.75;line-height: 300px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n1) {background-color: #d3dce6;}
/style
3.轮播切换箭头
可以设置切换箭头的显示时机
//arrow属性定义了切换箭头的显示时机。默认情况下
//切换箭头只有在鼠标 hover 到走马灯上时才会显示
//若将arrow设置为always则会一直显示设置为never则会一直隐藏。templateel-carousel :interval5000 arrowalwaysel-carousel-item v-foritem in 4 :keyitemh3{{ item }}/h3/el-carousel-item/el-carousel
/templatestyle.el-carousel__item h3 {color: #475669;font-size: 18px;opacity: 0.75;line-height: 300px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n1) {background-color: #d3dce6;}
/style
4.卡片化
当页面宽度方向空间空余但高度方向空间匮乏时可使用卡片风格
//将type属性设置为card即可启用卡片模式。从交互上来说
//卡片模式和一般模式的最大区别在于可以通过直接点击两侧的幻灯片进行切换。templateel-carousel :interval4000 typecard height200pxel-carousel-item v-foritem in 6 :keyitemh3 classmedium{{ item }}/h3/el-carousel-item/el-carousel
/templatestyle.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n1) {background-color: #d3dce6;}
/style
5.方向
默认情况下direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。
templateel-carousel height200px directionvertical :autoplayfalseel-carousel-item v-foritem in 3 :keyitemh3 classmedium{{ item }}/h3/el-carousel-item/el-carousel
/template关于走马灯组件的 大致使用方式就是这些深入浅出可以前往Carousel轮播组件
