javascript - 上一页箭头弄乱了图像宽度
问题描述
我已经实现了 Slick.js 来挖掘项目,但是由于某种原因,当我使用 nextArrow 和 prevArrow 时,我的图片被裁剪到宽度的 60% 左右,我试图制作一个自定义类,其宽度为 100%,但没有t 解决问题。刚刚检查了只有 prevArrow 导致了问题
$('.slider-one').not(".slick-initialized").slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next"
});
.wid {
width: 100% !important;
height: 500px;
}
/*Slider*/
.site-sider {
position: relative;
}
.position-top {
position: absolute;
top: 45%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next {
background-color: #091a5d;
padding: 1rem 1.5rem;
border-radius: 50%;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next {
opacity: 0.9;
}
.right-0 {
right: 0;
}
.slick-dots {
left:50%;
display: flex;
justify-content: center;
margin: 0;
padding: 16px 0;
list-style-type: none;
position: absolute;
bottom: 0;
right: 50%;
}
.slick-dots li {
margin: 0 0.6rem;
}
.slick-dots button {
display: block;
width: 8px;
height: 8px;
padding: 0;
border: none;
background-color: white;
text-indent: -99999px;
border-radius: 100%;
}
.slick-dots .slick-active button {
transform: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Font-->
<script src="https://kit.fontawesome.com/158e82d513.js" crossorigin="anonymous"></script>
<!--Slider-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<!--Styles-->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main>
<!--Slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" class="wid img-fluid" alt="Slika 1">
</div>
<div>
<img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" class="wid img-fluid" alt="Slika 2">
</div>
<div>
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="wid img-fluid" alt="Slika 3">
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
所以如果有人知道如何解决这个问题,请帮助兄弟:) <3
解决方案
而不是类直接使用图像
$('.slider-one').not(".slick-initialized").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>" });
推荐阅读
- c# - 如何检查我的 flowform bot 中的提示字段是否存在于我的数据库中
- hyperledger-fabric - 多通道 vs 多 BNA Hyperledger Composer
- r - R在读取文件时添加额外的数字
- c++ - 尝试在 ARM 板上使用 PKCS1_OAEP 使用 rsa 公钥加密数字时出现“cryptodev_digest_update:非法输入”错误
- gitlab - Gitlab:如何将原始日志收集到工件中?
- azure - Azure AKS:找出节点重新启动的原因
- angular - 如何在角度 2/4 中使用具有相同点击事件的两个函数?
- html - bootstrap 4手风琴没有关闭
- python - 将 Flask 环境默认设置为开发模式?
- xmgrace - 您能帮我如何更改 xmgrace 上数据集的顺序吗?