Realize the sliding switching effect of full-screen background image

Detailed steps, code, comments and instructions for using Vue to achieve swipe effects on swiping the full-screen background image.

step

• Create a Vue project: Create a new Vue project using the Vue CLI.
• Prepare image resources: Prepare the pictures you want to use for background switching and place them in the appropriate directory of the project.
• Writing HTML structure: Create an HTML structure containing image containers and navigation buttons.
• Writing CSS Styles: Set the full screen background and picture switching animation effect.
• Writing Vue component logic: The logic to realize the image switching.

Detailed code

1. Create a Vue project

First, make sure that the Vue CLI is installed. If not installed, you can use the following command to install:

npm install -g @vue/cli

Then create a new Vue project:

vue create background-slide-effect
cd background-slide-effect

2. Prepare image resources

existsrc/assetsCreate a directoryimagesFolder and put the picture you want to use into it. For example, there are three images:、and。

3. Write component code

existsrc/componentsCreate a directoryComponent, code is as follows:

<template>
  <div class="background-slider">
    <!-- Picture container -->
    <div
      v-for="(image, index) in images"
      :key="index"
      :class="{ 'background-image': true, 'active': currentIndex === index }"
      :style="{ backgroundImage: `url(${require(`@/assets/images/${image}`)})` }"
    ></div>
    <!-- Navigation Buttons -->
    <div class="navigation">
      <button @click="prevImage" :disabled="currentIndex === 0">Previous</button>
      <button @click="nextImage" :disabled="currentIndex ===  - 1">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BackgroundSlider',
  data() {
    return {
      // Image array, storing the image file name to be displayed      images: ['', '', ''],
      // The currently displayed image index      currentIndex: 0
    };
  },
  methods: {
    // Switch to the previous picture    prevImage() {
      if ( > 0) {
        --;
      }
    },
    // Switch to the next picture    nextImage() {
      if ( <  - 1) {
        ++;
      }
    }
  }
};
</script>

<style scoped>
.background-slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

. {
  opacity: 1;
}

.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.navigation button {
  padding: 10px 20px;
  border: none;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

.navigation button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

4. Use components in

<template>
  <div >
    <BackgroundSlider />
  </div>
</template>

<script>
import BackgroundSlider from './components/';

export default {
  name: 'App',
  components: {
    BackgroundSlider
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Code Comments

• HTML Part：

  • v-forInstructions are used to render image containers in a loop.v-bind:keyMake sure each picture container has a unique identity.
  • :classBindactiveClass, used to control the currently displayed picture.
  • :styleBindbackgroundImageStyle, dynamically set the URL of the background image.

• JavaScript Part：

  • dataThe function returns the component's data, including the image array and the currently displayed image index.
  • prevImageMethod is used to switch to the previous picture.nextImageMethod is used to switch to the next picture.

• CSS section：

  • .background-imageThe class sets the basic style of the picture container, including absolute positioning, background size and transparency.
  • .The class sets the transparency of the currently displayed image to 1 to achieve a fade-in effect.
  • .navigationThe class sets the style of navigation buttons, including positioning and layout.

Instructions for use

• Put the prepared pictures insrc/assets/imagesIn the directory and inComponentimagesAdd image file name to the array.
• Run the project:

npm run serve

• Open the browser and visithttp://localhost:8080, you can see the full screen background image sliding to switch special effects. You can click the "Previous" and "Next" buttons to switch images.

This is the end of this article about realizing the special effects of sliding switching on full-screen background image. For more related contents of sliding switching on full-screen image, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!