need:
Package a carousel diagram component
Function:
1. There is a click icon to switch up and down, which can enable clicking to switch up and down
2. There are small dots at the bottom, corresponding to each picture, image switching, and small dots switching
3. You can click to switch the small dots, and the corresponding pictures will also be switched.
Functional implementation
The parent component passes the array variable containing the picture through a custom attribute passing value.
The child component receives the array through prorps and renders the pictures in the array loop
Create a new public component src/components/carousel/
html part:
- Carousel picture part consists of ul set of li set of img
- Previous Next Image by
- Small dots at the bottom
<template>
<div class="home-banner">
<div class="carousel">
<!-- Carousel picture part -->
<ul class="carousel-body">
<li class="carousel-item fade">
<img src="" alt="" />
</li>
</ul>
<!-- Previous Next Arrow Icon -->
<a href=" javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
<a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
<!-- Small dots at the bottom -->
<div class="carousel-indicator">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</template>CSS part
- The carousel diagram switch is implemented through the opacity of the class name fade
- Add transition to make the changes smoother
- Set border-radius to span to turn into small dots
<style scoped lang="less">
.home-banner {
width: 1240px;
height: 500px;
position: absolute;
left: 0;
top: 0;
z-index: 98;
background-color: pink;
}
.carousel {
width: 100%;
height: 100%;
min-width: 300px;
min-height: 150px;
position: relative;
.carousel {
&-body {
width: 100%;
height: 100%;
}
&-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 0.5s linear;
&.fade {
opacity: 1;
z-index: 1;
}
img {
width: 100%;
height: 100%;
}
}
&-indicator {
position: absolute;
left: 0;
bottom: 20px;
z-index: 2;
width: 100%;
text-align: center;
span {
display: inline-block;
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
~span {
margin-left: 12px;
}
&.active {
background: #fff;
}
}
}
&-btn {
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
border-radius: 50%;
position: absolute;
top: 228px;
z-index: 2;
text-align: center;
line-height: 44px;
opacity: 0;
transition: all 0.5s;
&.prev {
left: 20px;
}
&.next {
right: 20px;
}
}
}
&:hover {
.carousel-btn {
opacity: 1;
}
}
}
</style>The carousel diagram component is introduced into the parent component and the array is passed
1. Import the carousel diagram component, and use the component name note on the page (here is a local component registration, and it can be registered as a global component)
2. Simulate carousel graph data, object array, each object has image data imageUrl and id
3. Pass the carousel graph data to the subcomponent through custom properties
Parent component part
<script setup lang='ts'>
import Carousel from "@/components/carousel/"
import { ref } from "vue";
const bannerList = ref([
{ imageUrl: "", id: 1 },
{ imageUrl: "", id: 2 },
{ imageUrl: "", id: 3 },
{ imageUrl: "", id: 4 },
{ imageUrl: "", id: 5 }
])
</script>
<template>
<Carousel :slides="bannerList" />
</template>
<style scoped>
</style>The child component receives the parent component data and renders it
- v-for loop rendering image.key value binding
- v-for loop rendering of the small dot span at the bottom, making the number of small dots the same as the number of pictures
<script lang="ts" setup name="Carousel">
const { slides } = defineProps<{
slides: []
}>()
</script>
.....Omitted
<!-- Carousel pictures -->
<ul class="carousel-body">
<li class="carousel-item " fade v-for="(item, index) in slides" :key="">
<img :src="" alt="" />
</li>
</ul>
......Omitted
<!-- Small dots at the bottom -->
<div class="carousel-indicator">
<span v-for="(item, index) in slides" active :key=""></span>
</div>Click the upper and lower icons to switch pictures, click the small dot at the bottom to switch pictures
Click the upper and lower icons to switch pictures:
- Register events pre and next to the upper and lower charts
- Define a variable active record of the subscript of the currently displayed image
- Determine whether the subscript of the active record and the current subscript are consistent to display the image (fade class name)
Click the small dot at the bottom to switch the picture:
- Register a click event for each span, and assign the current small dot index to active when clicking
- Active changes. Since active is responsive data, the image changes to the same index image as active (fade class name implementation)
- The small dots also rely on the class name to achieve highlighting changes: class="{ active: active === index }". When the active and the current index are the same, the active class name is obtained, and the small dots become white
<script lang="ts" setup name="Carousel">
import { ref } from 'vue';
const { slides } = defineProps<{
slides: []
}>()
//Highlight subscriptconst active = ref(0)
// Previous Nextconst prev = () => {
--
if ( < 0) {
= - 1
}
}
const next = () => {
++
if ( > - 1) {
= 0
}
}
</script
<template>
<div class="carousel" @mouseenter="stop" @mouseleave="start">
<!-- Carousel pictures -->
<ul class="carousel-body">
<li class="carousel-item " :class="{ fade: active === index }" v-for="(item, index) in slides"
:key="">
<RouterLink :to="">
<img :src="" alt="" />
</RouterLink>
</li>
</ul>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="carousel-btn prev" @click="prev"><i class="iconfont icon-angle-left"></i></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="carousel-btn next" @click="next"><i class="iconfont icon-angle-right"></i></a>
<!-- Small dots at the bottom -->
<div class="carousel-indicator">
<span v-for="(item, index) in slides" @click="active=index" :class="{ active: active === index }"
:key=""></span>
</div>
</div>
</template>Summarize
Component value transfer
Encapsulated components can pass values through parent-child components and slot-to-slot-to-data transfers.
Carousel diagrams realize infinite scrolling
We need to process the index when the image reaches the critical point to achieve the connection between the beginning and end of the image
- When the index is less than zero, assign the index to the last index
- When the index is greater than the last index, assign the index value to 0
// Previous Nextconst prev = () => {
--
if ( < 0) {
= - 1
}
}
const next = () => {
++
if ( > - 1) {
= 0
}
}Implement small dot click highlight to switch
- First set an active highlighting class, add this class to highlight small dots
- Set an active record of the index value of the currently selected small dot. When the active and the current index are the same, the corresponding span obtains the active class name.
:class="{ active: active === index }"- Register a click event for each span. When clicking, change the active value to the index of the small dot that is clicked.
@click="active=index"
Summarize
This is the end of this article about the function of vue3 packaged carousel diagram components. For more related content of vue3 packaged carousel diagram components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!