I recently added a carousel slider to my website, and while it looks great on larger screens like desktops and laptops, I noticed that the images are not scaling properly when viewed on smaller screen widths. This has resulted in non-responsiveness which is quite frustrating.
Despite trying to apply media queries, I couldn't get the images to scale correctly within the carousel.
Interestingly, other parts of the website seem responsive except for this particular carousel section, and I'm struggling to find a solution to make it work seamlessly with different screen sizes.
If you have any insights into what might be causing this issue and how I can go about fixing it, I would greatly appreciate your input!
$(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>