为啥我的轮播滑块中的图像没有响应?
Posted
技术标签:
【中文标题】为啥我的轮播滑块中的图像没有响应?【英文标题】:Why are the images in my carousel slider non-responsive?为什么我的轮播滑块中的图像没有响应? 【发布时间】:2020-06-05 01:06:50 【问题描述】:我在我的网站上实现了以下轮播滑块,它在台式机和笔记本电脑屏幕上看起来很完美,但是当屏幕宽度减小时,图像会覆盖整个屏幕并且一切都没有响应。
我不完全确定如何应用媒体查询来缩放图像。
我相信网站的所有其他部分都是响应式的,但轮播除外,并且无法弄清楚如何绕过使其正常工作。
我可能做错了什么,我该如何解决?
$(document).ready(function()
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
let ind = 0;
$slider
.children(".item")
.each(function()
$(this).attr("data-index", ind++);
);
i.on("click", function(e)
const that = $(this);
let dataIndex = that.data("index");
$(".item").removeClass("active");
that.addClass("active");
);
);
.sliderG
width: 75%;
height: 80%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 50px;
.sliderG .item
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
background: url(https://www.g-money.com.gh/wp-content/uploads/2019/06/squircle-minG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: 10px;
transition: all ease 0.7s;
z-index: 1;
transform: scale(0.8);
left: -300px;
right: 0;
margin: 0 auto;
.sliderG .item.active
left: 0;
right: 0;
z-index: 2;
opacity: 1;
background: #ccc;
transform: scale(1);
.sliderG .item.active~.item
left: 0;
right: -300px;
.sliderG .item.active+.item~.item
opacity: 0.3;
visibility: hidden;
.sliderG .item.active+.item~.item:hover
opacity: 0.7;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sliderG'>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Sending-MoneyT-scaled.jpg" >
</div>
<div class='item active'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" >
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Pay-MerchantT-scaled.jpg" >
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Buy-AirtimeT-scaled.jpg" >
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Bank-ServiceT-scaled.jpg" >
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Withdrw-at-AgentT-scaled.jpg" >
</div>
<!--<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" >
</div>-->
</div>
【问题讨论】:
【参考方案1】:将以下代码添加到 CSS 中
.sliderG .item img
display: block;
width: 100%
【讨论】:
以上是关于为啥我的轮播滑块中的图像没有响应?的主要内容,如果未能解决你的问题,请参考以下文章
当我试图在 laravel 中制作帖子的轮播滑块时,我遇到了一个错误