javascript - slick.js 滑块问题
问题描述
所以我第一次使用 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>解决方案
通过查看您的代码，我得到的印象是您将一堆 HTML 和 CSS 复制粘贴到您的项目中，您不确定它在做什么。
我确实看到了一个循环，这些值是否正确填充？
@foreach($schedules as $schedule)
HTML 中的样式/变量呢？
style="font-size:14px; color:var(--web_primary_color); align-self:flex-end;">{{ $config['full_address']['value'] }}
看到这个并查看您的问题我的猜测是。
- A
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,
});
});
您可以使用此 Codepen作为起点并根据自己的喜好对其进行调整。
希望这可以帮助。
推荐阅读
- ios - 如何设置 fastlane 凭据
- sql - 堆栈 FIFO 无数据
- amazon-web-services - CloudFormation S3 Bucket/BucketPolicy 创建 - 模板的 Resources 块中未解决的资源依赖项 [Environment]
- android - 在 AndroidX 中支持深色和浅色主题
- git - 如何在 git commit 正文的每一行前面添加一个字符
- java - 如果字符串是“，”，则删除字符串的最后一个字符
- node.js - 如何告诉浏览器在 reactjs 应用程序中使用 gzip 压缩文件？
- javascript - 如何使用 xpath 通过其属性 ID 单击 src img？
- amazon-web-services - 在 React Native 中不使用 API 密钥访问 AWS AppSync
- javascript - 更新由远程数据填充的 Kendo 网格列的值