写点什么

纯 CSS 实现轮播图

作者:Augus
  • 2021 年 11 月 14 日
  • 本文字数:665 字

    阅读完需:约 2 分钟

纯CSS实现轮播图

前言

往常我们实现轮播图,都是要通过大量的 JS 代码,才能够实现。但在前端越发壮大的今天,CSS 已经是非常强的了,已经完全可以通过纯 CSS 实现轮播图了,接下来就让我通过几行代码来代大家实现纯 CSS 版的轮播图。

轮播图原理


如上图,右侧黑色方框是一个视口,左侧红色方框是四张图片。


每次滑动的时候,让当前的图片的中线与视口的中线对齐,并停下,就可以实现轮播效果了。当然每张图片的左边线(右边线)和视口的左边线(右边线)对齐也是可以的。

实现

  • 我们可以把轮播图设置为一个组件,目录结构如下。



  • 首先我们需要现书写一个容器


// swipe.vue<template>  <div class="swipe">    <slot></slot>  </div></template><script>export default {  name: 'Swipe',  props: {    list: {      type: Object,      default: []    }  }}</script><style lang="scss" scoped>.swipe {  white-space: nowrap;  overflow: auto;  scroll-snap-type: x mandatory;}</style>
复制代码


  • 接着是每个录播图的页面


// swipe-item.vue<template>  <div class="swipe-item">    <slot></slot>  </div></template><script>export default {  name: 'SwipeItem'}</script><style lang="scss" scoped>.swipe-item {  display: inline-block;  width: 100%;  height: auto;  scroll-snap-align: center;}</style>
复制代码


  • 然后是导出这个两个组件。


// index.jsimport Swipe from './swipe.vue';import SwipeItem from './swipe-item.vue';
export {Swipe, SwipeItem};
复制代码


好,今天就到这里了,今天努力的你依然是最棒的。Bye Bye!!!

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
纯CSS实现轮播图