拉伸第一张幻灯片中的图像 Slick Slider

Question

I have this slick slider and i want to Stretch the image in the first current active slide我有这个光滑的 slider，我想在第一个当前活动幻灯片中拉伸图像

i want do this https://prnt.sc/slrcny我想做这个https://prnt.sc/slrcny

for example here example working slider you want to see this example.例如这里的例子工作 slider你想看这个例子。 First current active slide is Stretch.当前第一个活动幻灯片是 Stretch。 How i can do it in the slick slider?我怎么能在光滑的 slider 中做到这一点？

 $(document).ready(function() { $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, dots: true, centerMode: false, focusOnSelect: true }); });

 .slider-nav div { width: 200px; height: 60px; }.slider-for { width: 250px; height: 250px; margin }.slider-wrap { positon: absolute; width: 300px; height: 300px; margin-left: 20px; }.slick-arrow:before { color: gray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" /> <div class="slider-wrap"> <div class="slider-nav"> <div> <img src="http://placehold.it/50x50"> </img> </div> <div> <img src="http://placehold.it/50x51"> </img> </div> <div> <img src="http://placehold.it/50x52"> </img> </div> <div> <img src="http://placehold.it/50x53"> </img> </div> <div> <img src="http://placehold.it/50x54"> </img> </div> </div> </div

Answer 1

Here's a working snippet for what you want to achieve, in this case the images sizes are 400x600 but since we are using the background-size: cover property the image will be covered in the whole <div class="slide-photo"></div>这是您想要实现的工作片段，在这种情况下，图像尺寸为400x600 ，但由于我们使用background-size: cover属性，图像将被整个<div class="slide-photo"></div>

 $(document).ready(function () { $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, dots: false, centerMode: false, focusOnSelect: true, }); });

 .slider-nav { height: 400px; }.slider-nav.slick-list { width: 100%; height: 100%; }.slider-nav.slick-list.slick-track { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }.slider-nav.slick-list.slick-slide { margin: 0 15px; position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }.slider-nav.slick-list.slick-slide.slide-photo { -webkit-transition: 1s cubic-bezier(0.83, 0, 0.17, 1); transition: 1s cubic-bezier(0.83, 0, 0.17, 1); background-position: bottom; background-size: cover; height: 50%; }.slider-nav.slick-list.slick-slide.slide-photo::after, .slider-nav.slick-list.slick-slide.slide-photo::before { bottom: 0; width: 0%; height: 4px; background-color: #ffbf00; position: absolute; content: ''; -webkit-transition: 1s cubic-bezier(0.83, 0, 0.17, 1); transition: 1s cubic-bezier(0.83, 0, 0.17, 1); }.slider-nav.slick-list.slick-slide.slide-photo:after { right: 50%; }.slider-nav.slick-list.slick-slide.slide-photo:before { left: 50%; }.slider-nav.slick-list.slick-slide.slick-current.slide-photo { background-color: #c1c1c1; background-position: center center; height: 100%; }.slider-nav.slick-list.slick-slide.slick-current.slide-photo:before, .slider-nav.slick-list.slick-slide.slick-current.slide-photo:after { width: 50%; } /*# sourceMappingURL=style.css.map */

 <.doctype html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick:css" /> </head> <body> <div class="slider-container"> <div class="slider-nav"> <div> <div class="slide-photo" style="background-image: url(https.//picsum;photos/seed/one/400/600):"></div> </div> <div> <div class="slide-photo" style="background-image: url(https.//picsum;photos/seed/fdsgds/400/600):"></div> </div> <div> <div class="slide-photo" style="background-image: url(https.//picsum;photos/seed/gwegwe/400/600):"></div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> </body> </html>

拉伸第一张幻灯片中的图像 Slick Slider

问题描述

1 个解决方案

解决方案1
1 2020-05-22 13:44:46

拉伸第一张幻灯片中的图像 Slick Slider

问题描述

1 个解决方案

解决方案1 1 2020-05-22 13:44:46

解决方案1
1 2020-05-22 13:44:46