slick.js滑块问题

Question

因此，我第一次使用平滑库来使滑块工作，但是我遇到了各种问题：

1）由于某些原因，我的第一个滑块内容未渲染，仅背景可见。

2）褪色时，滑块会“堆叠”在滑块容器的右侧，而不是完全消失。

 $('.slider_zim_items_container').slick({ autoplay: true, dots:false, arrows:false, infinite:true, autoplaySpeed: 3000, speed: 2000, fade: true, cssEase: 'linear' }).slick('slickFilter', '.slide'); 

 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> /*SLIDER ZIM START*/ .slider_zim_maincontainer{width:100%; height:auto; position:relative; overflow:hidden; display:flex; flex-direction:column; ;} .slider_zim_prev{position:absolute; width:60px; height:50px; top:50%; border-radius:0px; transform:translateY(-50%); left:0px; z-index:9999; display:none; background-color:rgb(240,240,240);} .slider_zim_next{position:absolute; width:60px; height:50px; top:50%; border-radius:0px; transform:translateY(-50%); right:0px; z-index:9999; display:none; background-color:rgb(240,240,240);} .slider_zim_prev .fa{font-size:32px; color:rgba(0,0,0,0.7); margin:auto; padding-right:5px;} .slider_zim_next .fa{font-size:32px; color:rgba(0,0,0,0.7); margin:auto; padding-left:5px;} .slider_zim_navigation_container{width:auto; height:auto; display:none; border-radius:0px 0px 0px 0px; position:absolute; padding:10px; background-color:none; bottom:25px; right:25px; z-index:9999;} .slider_zim_items_container{width:100%; height:100vh; position:relative; overflow:hidden; background-color:black;} .slider_gradient_overlay{width:100%; height:100%; z-index:999; position:absolute; top:0px; left:0px;} .slider_top_gradient_overlay{width:100%; height:50px; position:absolute; top:0px; left:0px; z-index:99999; background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .slider_bottom_gradient_overlay{width:100%; height:20px; position:absolute; left:0px; bottom:0px; background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0)); z-index:9999;} .slider_left_gradient_overlay{width:50px; height:100%; position:absolute; top:0px; left:0px; z-index:99999; background: linear-gradient(to right, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} .slider_right_gradient_overlay{width:50px; height:100%; position:absolute; top:0px; right:0px; z-index:99999; background: linear-gradient(to left, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));} . .slider_zim_small_container{width:100%; height:10vh; background-color:rgb(240,240,240); display:flex; align-items:center; padding:0px 25px;} .slider_zim_small_text{font-size:18px; color:rgba(0,0,0,0.6); font-weight:600; margin-left:auto; margin-right:10px;} .slider_zim_small_social_container{width:auto; height:auto; display:flex;} .slider_zim_small_social_icon{width:40px; height:40px; display:flex; border-radius:4px; background-color:rgba(0,0,0,0.6); margin:0px 10px;} .slider_zim_small_social_icon .fab{margin:auto; font-size:29px; color:white;} .prev{transition:all 1000ms ease; opacity:0;} .next{transition:all 1000ms ease; opacity:0;} .container:hover .prev{opacity:1;} .container:hover .next{opacity:1;} .slider_active{display:flex; opacity:1;} .slider_active_dot{background-color:rgba(255,255,255,0.9);} .dot{width:15px; height:15px; border-radius:50%; background-color:rgba(0,0,0,0.5); transition: all 800ms ease; margin:0px 15px; cursor:pointer;} /*SLIDER ZIM END*/ /**/ .slider_item_container{width:100%; height:100%; padding:75px; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;} .slider_item_gradient_overlay{width:100%; height:100%; position:absolute; z-index:3; top:0px; left:0px; } .slider_item_image{width:100%; height:100%; position:absolute; z-index:2; top:0px; left:0px; background-cover:size; } .slider_item_title{font-size:45px; color:var(--web_primary_color); font-family:Yesteryear; z-index:9999; margin:20px 0px;} .slider_item_info_container{width:75%; min-height:60%; margin:20px 0px; border-radius:4px; z-index:9999999; display:flex; justify-content:center;} .slider_item_info_subcontainer{width:75%; height:100%; display:flex;} .slider_item_info_column_container{width:50%; height:100%; padding:15px; display:flex; flex-direction:column; justify-content:center; } .slider_item_info_row_container{width:auto; height:auto; display:flex; flex-direction:column; margin:15px 0px;} .slider_item_info_row_icon_title_container{width:auto; height:auto; display:flex; align-items:center; justify-content:flex-end; margin-bottom:15px;} .slider_item_info_row_icon_title_container .fa{font-size:24px; color:rgba(255,255,255,0.9); margin-right:10px;} .slider_item_info_row_icon_title{font-size:30px; color:rgba(255,255,255,0.9); } .slider_item_info_row_link{font-size:14px; color:var(--web_primary_color); align-self:flex-end;} .slider_item_info_row_sche_container{width:auto; height:auto; margin:15px 0px; display:flex; flex-direction:row; align-items:center;} .slider_item_info_row_sche_container .fa{font-size:24px; color:rgba(255,255,255,0.9); margin-right:10px;} .slider_item_info_row_sche_title{font-size:30px; color:rgba(255,255,255,0.9); } .slider_item_info_column_sche_container{width:auto; height:auto; display:flex; flex-direction:column; } .slider_item_info_column_sche_data_container{width:auto; height:auto; display:flex; align-items:center; margin:3px 0px;} .slider_item_info_column_sche_data_day{font-size:14px; color:var(--web_primary_color); margin-right:5px;} .slider_item_info_column_sche_data_hour{font-size:14px; color:rgba(255,255,255,0.9);} .slider_item_info_column_sche_data_separator{color:var(--web_primary_color); font-size:4px; margin:0px 10px;} .slider_item_links_container{width:auto; height:auto; display:flex; z-index:99999; margin:20px 0px;} .slider_item_link{padding:12px 17px; background-color:var(--web_primary_color); font-size:18px; color:white; margin:0px 15px;} /**/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <section class="slider_zim_maincontainer" style=""> <div class="slider_zim_items_container" style=""> <div class="slider_item_container slide" style=""> <div class="slider_item_gradient_overlay" style="background-color:rgba(0,0,0,0.4);" ></div> <div class="slider_item_image" style="background-color:pink;"></div> <span class="slider_item_title" style="">{{ $config['web_name']['value'] }}</span> <div class="slider_item_info_container" style="background-color:rgba(0,0,0,0.7);"> <div class="slider_item_info_subcontainer" style=""> <div class="slider_item_info_column_container" style=""> <div class="slider_item_info_row_container" style=""> <div class="slider_item_info_row_icon_title_container" style=""> <i class="fa fa-phone" style=""></i> <span class="slider_item_info_row_icon_title" style="">Reservar</span> </div> <a class="slider_item_info_row_link" href="" style="">{{ $config['booking_phone']['value'] }}</a> </div> <div class="slider_item_info_row_container" style=""> <div class="slider_item_info_row_icon_title_container" style=""> <i class="fa fa-map-marker-alt" style=""></i> <span class="slider_item_info_row_icon_title" style="">Visitanos</span> </div> <a class="slider_item_info_row_text" href="" style="font-size:14px; color:var(--web_primary_color); align-self:flex-end;">{{ $config['full_address']['value'] }}</a> <a class="slider_item_info_row_text" href="" style="font-size:14px; color:var(--web_primary_color); align-self:flex-end;">{{ $config['city_zip_address']['value'] }}</a> </div> </div> <div class="slider_item_info_column_container" style=""> <div class="slider_item_info_row_sche_container" style=""> <i class="fa fa-calendar-alt" style=""></i> <span class="slider_item_info_row_sche_title" style="">Horario</span> </div> <div class="slider_item_info_column_sche_container" style=""> @foreach($schedules as $schedule) <div class="slider_item_info_column_sche_data_container" style=""> <span class="slider_item_info_column_sche_data_day" style="">{{ $schedule->day }}:</span> <span class="slider_item_info_column_sche_data_hour" style="">{{ $schedule->first }}</span> <i class="slider_item_info_column_sche_data_separator fa fa-circle" style=""></i> <span class="slider_item_info_column_sche_data_hour" style="">{{ $schedule->second }}</span> </div> @endforeach </div> </div> </div> </div> <div class="slider_item_links_container" style=""> <a class="slider_item_link" href="" style="">VER NUESTRO MENU</a> <a class="slider_item_link" href="" style="">HACER UNA RESERVA</a> </div> </div> <div class="slide" style="width:100%; height:100%; background-color:red; position:relative; "></div> <div class="slide" style="width:100%; height:100%; background-color:yellow; position:relative; "></div> </div> </section> 

Answer 1

通过查看您的代码，我得到的印象是您将一堆HTML和CSS复制并粘贴到了项目中，而您不确定该项目在做什么。

我确实看到一个循环，这些值是否正确填充？ @foreach($schedules as $schedule)

HTML中的样式/变量呢？ style="font-size:14px; color:var(--web_primary_color); align-self:flex-end;">{{ $config['full_address']['value'] }}

看到这并看着你的问题我的猜测是。

1. div放错位置/未呈现，或者CSS损坏，导致部分无法正确显示。
2. 同样，您的CSS或HTML容器结构可能是一个错误。

如果您还没有的话，建议您阅读slick.js的文档，并从头开始创建一个滑块。 这样，您对自己的代码和样式以及代码的执行情况感到满意。 在这里，您可以构建内容并将滑块移动到项目中。

基本的html结构

<div class="carousel-wrapper">
  <div class="slide"><img src="https://loremflickr.com/320/240/flower"></div>
  <div class="slider"><img src="https://loremflickr.com/320/240/dog"></div>
  <div class="slide"><img src="https://loremflickr.com/320/240/cat"></div>
</div>

页面加载后，您的JavaScript会加载slick.js。

$(document).ready(function(){
  $('.carousel-wrapper').slick({
  autoplay: true,
  });
});

您可以将此Codepen作为起点，并根据自己的喜好进行调整。

希望这可以帮助。