我在我的网站上实现了以下轮播滑块,它在台式机和笔记本电脑的屏幕上看起来都很完美,但是当减小屏幕宽度时,图像将覆盖整个屏幕,并且一切都将变得无响应。
我不确定如何应用媒体查询来缩放图像。
我相信,除了轮播之外,网站的所有其他部分都具有响应能力,无法弄清楚如何使其正常工作。
我一直在做错什么,我该如何解决?
$(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" alt="G-Money Send Money">
</div>
<div class='item active'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Cash-Out at Agent">
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Pay-MerchantT-scaled.jpg" alt="G-Money Pay Merchant">
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Buy-AirtimeT-scaled.jpg" alt="G-Money Buy Airtime">
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Bank-ServiceT-scaled.jpg" alt="G-Money Bank Account">
</div>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Withdrw-at-AgentT-scaled.jpg" alt="G-Money Withdraw at Agent">
</div>
<!--<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Pay Bill">
</div>-->
</div>
答案 0 :(得分:0)
将以下代码添加到CSS
.sliderG .item img{
display: block;
width: 100%
}