怎么小白点到左上角

Question

		<swiper-slide>
			<img class="swiper-img" src="https://imgs.qunarzz.com/sight/p0/2011/2e/2e62e314121542fba3.water.jpg_710x360_27760d18.jpg" />
		</swiper-slide>
		<swiper-slide>
			<img class="swiper-img" src="https://imgs.qunarzz.com/sight/p0/2011/f0/f050f346cfd6dc62a3.water.jpg_710x360_88d3de6f.jpg" />
		</swiper-slide>
		
		
	
		<div class="swiper-pagination" slop="pagination"></div>
		
		
	</swiper>
</div>

Answer 1

提问者 qq_蓝骏毅_04076633 2020-11-07 15:15:35

怎么把左上角按钮放在图片正中间，在vue怎么做的

• Dell #1

  正常写样式，你可以把scoped 去掉，直接覆盖圆点的样式即可。

Answer 2

提问者 qq_蓝骏毅_04076633 2020-11-07 15:14:23

<template>
<!-- 首页图片轮播图-->
<div class="wrapper">
<swiper :options="swiperOption">
  
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>


<div class="swiper-pagination" slop="pagination"></div>
</swiper>
</div>
</template>

<script>
export default{
name:'HomeSwiper',
data () {
return {
  swiperOption: {
pagination: '.swiper-pagination',
loop:true
  },
  
  swiperList:[{
  id:'0001',
  imgUrl:'https://imgs.qunarzz.com/sight/p0/2011/2e/2e62e314121542fba3.water.jpg_710x360_27760d18.jpg'
  },{
id:'0002', 
  imgUrl:'https://imgs.qunarzz.com/sight/p0/2011/f0/f050f346cfd6dc62a3.water.jpg_710x360_88d3de6f.jpg'
  }]
  
}
}
}
</script>

<style scoped>

.wrapper >>> .swiper-pagination-bullet-active

background : #FFFFFF

.wrapper
overflow :hidden
width: 100%
height: 0

padding-bottom :50%
background #eee



.swiper-img
width: 100%
</style>

Answer 3

提问者 qq_蓝骏毅_04076633 2020-11-07 00:30:59

你好，在吗

Answer 4

提问者 qq_蓝骏毅_04076633 2020-11-07 00:29:11

这样我怎么该如何修改

Answer 5

提问者 qq_蓝骏毅_04076633 2020-11-07 00:23:17

什么问题

Answer 6

提问者 qq_蓝骏毅_04076633 2020-11-07 00:22:12

<template>
<!-- 首页图片轮播图-->
<div class="wrapper">
<swiper :options="swiperOption" >
  
<swiper-slide>
<img class="swiper-img" src="https://imgs.qunarzz.com/sight/p0/2011/2e/2e62e314121542fba3.water.jpg_710x360_27760d18.jpg" />
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="https://imgs.qunarzz.com/sight/p0/2011/f0/f050f346cfd6dc62a3.water.jpg_710x360_88d3de6f.jpg" />
</swiper-slide>



<div class="swiper-pagination" slop="pagination"></div>


</swiper>
</div>
</template>

<script>
export default{
name:'HomeSwiper',
data () {
return {
  swiperOption: {
pagination: '.swiper-pagination',

  }
}
}
}
</script>

<style scoped>

.wrapper
overflow :hidden
width: 100%
height: 0

padding-bottom :31.25%
background #eee

.swiper-img
width: 100%
</style>