Tip: There are three ways to realize the carousel image effect, one is through pure css; the other is through jQuery; the third is through the swiper plug-in.
Tips: You can use pictures of your idols, it doesn’t feel too good~~~
foreword
This article is about the third way: by using the swiper plug-in to achieve carousel, the specific tutorial can refer to Swiper
提示：以下是本篇文章正文内容，下面案例可供参考
1. HTML part
<script src="js/vue.js"></script>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<!-- 轮播图 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in picture" :key="index">
<img :src="hrefURL+item" alt="" height="180rpx" width="100%">
</div>
</div>
<!-- 如果需要分页器 -->
<!-- <div class="swiper-pagination"></div> -->
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>2. JS part
<script src="swiper/swiper-bundle.min.js"></script>
<script src="js/jquery.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#content',
data: {
hrefURL: hrefURL,
picture: []
},
mounted() {
this.getImg()
},
methods: {
//轮播图
getImg() {
let sendData = {};
$.ajax({
type: "post",
url: hrefURL + '/api/index/banner',
data: sendData,
success: (res) => {
if (res.code == 1) {
console.log(res);
this.picture = res.data
} else {
layer.msg(res.msg);
}
},
error(err) {
layer.msg('网路出现故障；请稍后再试');
}
});
}
},
})
setTimeout(() => {
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 切换选项
loop: true, // 循环模式选项
autoplay: true, //可选选项，自动滑动
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}, 3000)
</script>hint:
The layer plug-in is used in the case, and the following is a detailed explanation of the layer.
layer plugin
It is used to realize various pop-up layer interactions in web pages . The operating environment of the layer plug-in is jQuery1.8 and above. Because the layer is a plug-in based on jQuery , it must be imported.
So the order of usage is:
First go to the official website to download the latest layer plug-in. For details, please refer to the layer pop-up layer component .
①Refer to jquery
②Refer to layer.min.js.
Box shadow (for optimization)
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;Text Gradient (for optimized effect)
background-image: -webkit-linear-gradient(bottom, #164A92, #1a92ca);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;Summarize
This article only briefly introduces the carousel through the swiper plug-in, and the optimization of the user experience through the layer pop-up layer plug-in. The above is what I will talk about today. If it is useful, please don’t forget to like it before leaving~~~