javascript - slick.js slider 问题

Question

所以我第一次使用 slick 库来让我的 slider 工作，但是我遇到了各种问题:

1) 我的第一个 slider 内容由于某种原因没有被渲染，只有背景是可见的。

2)当淡出时， slider “堆叠”到 slider 容器的右侧，而不是完全消失。

$('.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 的文档并从头开始创建一个 slider 。通过这种方式，您对自己的代码和样式以及它正在做什么感到很自在。从那里你可以建立东西并将你的 slider 移动到你的元素中。

基本的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,
  });
});

您可以使用 this Codepen作为起点并根据自己的喜好进行调整。

希望这对您有所帮助。