小圆点出现的位置不对

首页课程实战体系课手记专栏慕课教程

小圆点出现的位置不对

来源：2-6 Vue项目首页 - 首页轮播图（2）

_追随

2020-05-26 17:59:22

<swiper-slide>

<img

class="swiper-img"

src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/127433/27/2782/137046/5ec9d8eaEe9e54188/838ea96d9f6a6061.jpg!cr_1125x445_0_171!q70.jpg.dpg"

</swiper-slide>

<swiper-slide>

<img

class="swiper-img"

src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/39975/6/2210/103146/5cbfdd4fEd359fb15/90c41bac5ab851de.jpg!cr_1125x445_0_171!q70.jpg.dpg"

</swiper-slide>

</swiper>

</div>

</template>

export default {

name: 'HomeSwiper',

data () {

return {

swiperOption: {

pagination: '.swiper-pagination'

}

</script>

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

background red !important

.wrapper

overflow hidden

width 100%

height 0

padding-bottom 31.25%

background-color #eeeeee

.swiper-img

width: 100%;

</style>

写回答

2回答

好帮手慕星星

2020-05-26

已采纳

同学你好，是图片高度的问题：

图片高度超出了wrapper盒子的padding-bottom值。因为圆点是相对于swiper-container盒子进行定位的，而这个盒子高度是由图片高度撑起来的，超出padding-bottom值部分隐藏了，所以看不到小圆点。建议修改圆点相对于wrapper盒子定位

效果：

自己再测试下，祝学习愉快！

好帮手慕夭夭

2020-05-26

同学你好，代码不全，老师这边没有办法测试查看效果。但是看同学的代码中，类名前面多写了一个点，去掉一个试试。如下：

如果还是不行，请把全部代码粘贴到问答区，以便老师准确高效的定位问题。

祝学习愉快~

h追随

h // mian.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import fastClick from 'fastclick' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'styles/reset.css' import 'styles/border.css' import 'styles/iconfont.css' import 'swiper/dist/css/swiper.css' Vue.config.productionTip = false fastClick.attach(document.body) Vue.use(VueAwesomeSwiper) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

h020-05-26

共6条回复

0 学习 · 10739 问题

查看课程

相似问题

没出现圆点

回答 1

轮播图的小圆点显示不出来

回答 1

请问为啥图片显示不了还有小圆点的问题也显示不了

回答 1

老师，为什么我的圆点会被挤下来

回答 2

蓝色小点是什么原理啊？

回答 8

打开慕课网App查看更多内容