This article mainly introduces the use of VUe-awesome-swiper and swiper plug-in in Nuxt to achieve video and text mixed rotation effect.

Front row tips:

  • Operating system: Windows 10
  • Editor: VS Code & HBuilder X
  • Version used:Vue - awesome - swiper: 4.4.1.Swiper: 4.5.1

Related recommendations:

  • Nuxt Development Notes – 1 Quick Start
  • Nuxt Development Notes – 3 Scrolling interactive effects

preview

CodeSandbox: Nuxt Development Notes – 2 Video and graphic hybrid wheel cast Banner Preview

The document

Vue – awesome – swiper, swiper

The installation

For details, see vue-awes-swiper

The 5.x version of Swiper is officially recommended, but I used it incorrectly on Nuxt and chose 4.5.1 instead.

The following is only the author’s way of use, only for reference.

# installationYarn add [email protected] vue - awesome - swiperCopy the code

configuration

Official provided Demo please see: SSR example code

The following is only the author’s way of use, only for reference.

  1. Create a vue-awes-swiper. js file in the plugins folder

    import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

Vue.use(VueAwesomeSwiper);
Copy the code

  2. Modify the nuxt.config.js file in the root directory

    Swiper/CSS/Swiper. CSS is not found. Swiper/CSS/Swiper

    css: [
  // import style (>= Swiper 6.x)
  // 'swiper/swiper-bundle.css',
  // import style (<= Swiper 5.x)
  "swiper/dist/css/swiper.css" 
],

plugins: [
  {
    src: "@/plugins/vue-awesome-swiper.js",
    ssr: false}].Copy the code

use

  1. Create the Swiper component in the Components folder

    <template> <div v-swiper="swiper_option"> <div class="swiper-wrapper"> <! -- video --> <div ref="video_slide" class="swiper-slide"> <div class="video_wrap"> <video ref="video" :src="swiper_video.src" :poster="swiper_video.poster" muted autoplay @ended="isEnded" @playing="isPlaying"> <source :src="swiper_video.src" type="video/mp4" /> </video> </div> </div> <! -- image --> <div v-for="swiper in swiper_image" :key="swiper.id" class="swiper-slide"> <div class="image image_zoom" :style="`background-image:url( ${swiper.img} )`"></div> </div> </div> <div slot="pagination" class="swiper-pagination"></div> </div> </template> <script> export default { name: "Swiper", props: { swiper_video: { type: Object, default: () => { return {} } }, swiper_image: { type: Array, default: () => { return [] } }, swiper_option: { type: Object, default: () => { return { pagination: { el: ".swiper-pagination", clickable: true }, autoplay: { delay: 5000, stopOnLastSlide: DisableOnInteraction: false // Manual sliding whether to stop autoplay}, Observer: true, observeParents: true, fadeEffect: { crossFade: true }, effect: "fade", } } }, }, data() { return {}; }, created() { const that = this; that.swiper_option.on = { transitionEnd: Function () {// Switch to the next screen, If (the. $refs.video_slide.classname. includes("swiper-slide-active")) {if (the. $refs.video_slide.classname. includes("swiper-slide-active")) { that.$swiper.autoplay.stop(); That.$refs.video.play(); // Play video}}}; // console.log("that.swiper_option: ", that.swiper_option); }, methods: { isEnded() { const that = this; If (that.$swiper.isend) {$swiper.slideto (0); $swiper.autoplay.start(); $swiper.autoplay.start(); $swiper.slidenext (); $swiper.autoplay.delay = 5000; $swiper.autoplay.delay = 5000; $refs.video.currentTime = 0; $refs.video.pause(); IsPlaying () {const that = this; If (that.$refs.video_slide.classname. includes("swiper-slide-active")) {that.$swiper.autoplay.stop(); // stop unicast}}}}; </script> <style> :root { --blue: #007bff; --light: #ffffff; } .swiper-wrapper { height: 100vh; } .video_wrap video { width: 100vw; } .image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--blue); background-size: cover; background-position: center; background-image: none; background-repeat: no-repeat; }. Swiper-slide-active. Image_zoom {-webkit-transform: scale(1.2); Moz - transform: scale (1.2); The transform: scale (1.2); -webkit-transition: all 10s; -moz-transition: all 10s; transition: all 10s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .pagination { position: absolute; left: 0; text-align: center; Bottom: 0.3125 rem; width: 100%; z-index: 100; } .swiper-pagination-bullet { display: inline-block; Width: 0.625 rem; Height: 0.375 rem; Opacity: 0.7; Border - the radius: 0.1875 rem; background: var(--light); Margin: 0 0.1875 rem; cursor: pointer; - its - the transition: width 0.3 s ease - in-out; Moz - the transition: width 0.3 s ease - in-out; The transition: width 0.3 s ease - in-out; } .swiper-pagination-bullet-active { background: var(--blue); opacity: 1; Width: 3.125 rem; } </style>Copy the code

  2. Use this component in the index.vue file in the Pages folder

    Tip: The videos and pictures here are all from online sources.

    <template>
  <div>
    <Swiper :swiper_video="swiper_data.swiper_video" :swiper_image="swiper_data.swiper_image"></Swiper>
  </div>
</template>

<script>
  import Swiper from "@/components/Swiper";

  export default {
    components: {
      Swiper
    },
    data() {
      return {
        swiper_data: {
          swiper_video: {
            src: "https://www.w3school.com.cn/example/html5/mov_bbb.mp4",
            poster: ""
          },
          swiper_image: [
            {
              id: 0,
              img: "https://picsum.photos/id/1/1920/1080"
            },
            {
              id: 1,
              img: "https://picsum.photos/id/10/1920/1080"
            },
            {
              id: 3,
              img: "https://picsum.photos/id/100/1920/1080"
            }
          ],
        },
      }
    }
  }
</script>

<style>
</style>
Copy the code

The source code

Github: “Nuxt development notes – (2) video and text mixed round broadcast” source