Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Usually we realize the round broadcast map, are to pass a lot of JS code, to be able to achieve. But in the front end more and more strong today, CSS is already very strong, has been completely through pure CSS to achieve the wheel cast graph, let me through a few lines of code to achieve pure CSS version of the wheel cast graph.

The principle of wheel cast graph

As shown above, the black box on the right is a viewport and the red box on the left is four images.

Each time you slide, align the center line of the current image with the center line of the viewport, and stop to achieve the rotation effect. Of course, it is also ok to align the left line (right line) of each image with the left line (right line) of the viewport.

implementation

  • We can set the caroute diagram as a component with the following directory structure.

  • First we need to write a container
// 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>
Copy the code
  • This is followed by a page for each recording
// 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>
Copy the code
  • The next step is to export the two components.
// index.js
import Swipe from './swipe.vue';
import SwipeItem from './swipe-item.vue';

export {Swipe, SwipeItem};
Copy the code

Well, that’s all for today. You are still the best today. Bye Bye!!