Question

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

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'] }}

看到这个，看着你的问题，我猜是这样。

div放错位置/未呈现，或者CSS损坏，导致部分无法正确显示。
同样可能是您的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,
  });
});

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

希望这会有所帮助。

slick.js滑块问题

1 个答案: