prevArrow 弄亂了圖像寬度
[英]prevArrow messing up the image width
問題描述
我已經實現了 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
2 個解決方案
解決方案1
0
而不是類直接使用圖像
$('.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'>" });
解決方案2
0
如果您使用的是引導程序 3，請使用此
.slick-prev:before, .slick-next:before {
font-family: "Glyphicons Halflings","slick", sans-serif;
font-size: 40px;
}
.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }
heroku搞砸了圖像格式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.