用于轮播的jQuery插件。
我正在开发一个 Slider Slicker 轮播，其中图像轮播显示在视口底部，从轮播中选择的活动图像显示在其上方。我正在使用...
隐藏的萌芽视频，嵌入在光滑滑块的 iframe 中，无法播放
我希望我的 iframe 可以在光滑的滑块内拖动（左/右），为了实现这一点，我创建了一个覆盖 div（iframe-overlay），并使用 SproutVideo Javascript Player API，我绑定了一个 ev.. .
我的网站上有很多滑块，它们都可以完美地使用此代码，然后今天（发布前 2 天）所有光滑的滑块响应设置都在 safari 中停止正常工作...
我想在光滑的轮播中使用lottie动画，但渲染页面后，lottie动画不显示（外部光滑的幻灯片工作正常）。 我的代码： 我想在光滑的轮播中使用lottie动画，但渲染页面后，lottie动画不显示（外部光滑的幻灯片工作正常）。 我的代码： <div class="slick-carousel"> <div class="tip"> <div class="animation"> <lottie-player ...></lottie-player> </div> <div class="tip"> <div class="animation"> <lottie-player ...></lottie-player> </div> </div> 在浏览器中div.animation渲染时内部没有lottie 我遇到了同样的问题，但我已经用下面的代码解决了这个问题。 Lottie-player 上没有“src”，这会阻止 Lottie 在加载时播放，我使用 data-src 属性来获取 JSON 路径并在 slickjs“init”回调上初始化 Lottie 播放器。我使用了 setTimeout 函数，因为当 slickjs 在页面加载时初始化时，slickjs“init”回调不会立即触发。 <lottie-player class="lottie-player" data-src="/path/to/json/" background="transparent" speed="1" direction="1" mode="normal" loop autoplay></lottie-player> var $el = jQuery(".hero-slider-content"); $el.on("init", function (event, slick, direction) { setTimeout(function () { jQuery("lottie-player").each(function () { var players = jQuery(this).attr("data-src"); this.load(players); }); }, 1000); }); $el.slick({ infinite: false, slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: true, autoplay: false, autoplaySpeed: 3000, });
我有一个 while 循环，使用光滑滑块多项目格式显示帖子。 这显示并工作没有问题。 我希望能够在...时“禁用”光滑的滑块功能
我接手了一个几年前开发的项目，我相信已经完成了一半。 （或者真的......规格改变了） 所以我有一个测验，用户可以尝试 3 次...
我的光滑中有 14 个项目/步骤，但是如果我单击最后一个点项目，它会显示步骤 13，而步骤 14 已被切断。有什么想法或建议如何解决它？ 设置光滑高度...
如何设置 slick.js 滑块中 centerPadding 的样式？我想设置填充的不透明度，但不是轨道中的所有项目。 $('.ourgroup-carousel').slick({ 无限：真实， 幻灯片ToSho...
我真的很希望能够使用 Ken Wheeler 的光滑轮播滑块，但很难理解如何使用它。我按照 Ken Wheeler 的 github 上的说明进行操作，但没有任何结果...
为什么 Slick Slider 将我的图像增长到数十万像素宽？
在下面的代码片段中，我无法重复我在网站上遇到的问题。不过，我可以说我已经将问题范围缩小到了 Slick Slider。在我开始使用之前，这个问题并没有发生...
Google 审核在光滑的滑块代码中给出了可访问性错误 辅助技术（例如屏幕阅读器）无法解释具有无效值的 ARIA 属性 Google 审核在光滑的滑块代码中给出了可访问性错误 屏幕阅读器等辅助技术无法解释具有无效值的 ARIA 属性 <div class="slider-videos slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="listitem" aria-labelledby="slick-slide40" style="width: 412px;"> <li class="slick-active" aria-hidden="false" aria-controls="navigation20" id="slick-slide20" aria-selected="true"><button type="button"data-role="none" tabindex="0">1</button></li> 我该如何修复它？我没有这些咏叹调和角色的信息 显然，目前无法手动更改它 - 您可以在 GitHub 上看到此讨论。 我在 Slip Carousel 中添加了这行代码，从而改进了可访问性： accessibility: false 希望能帮到你。 我遇到了 <input type="number"> 的问题，它是一个组合框 - 可能值的列表出现在输入下方，当用户在输入中键入时 - 选项会被过滤。 我想问题是类型是number但值是字符串......或者简单的数字类型输入与此类组合框不兼容。 我通过将其更改为 type="text" 并添加模式 + 输入模式解决了这个问题 - 这样在移动设备上用户仍然可以看到数字键盘： <input type="text" pattern="[0-9]*" inputmode="numeric"> 错误不再出现。 Google PageSpeed Insights 中出现错误 [aria-*] 属性与角色不匹配 每个 ARIA 角色都支持 aria-* 属性的特定子集。不匹配这些会使 aria-* 属性无效。了解如何将 ARIA 属性与其角色相匹配。 失败的元素 广告
Slick Slider React - 如何保持相同的宽度和空间，无论屏幕大小如何？
我正在创建一个与 Slick Slider 反应的滑块。问题是：当屏幕尺寸发生变化时，幻灯片尺寸会减小或相互堆叠。 光滑的滑块提供： 响应：[ ...
我正在开发一个基于引导程序的模板。我需要设置一个全宽光滑滑块，但其初始状态应从内容容器的左边缘开始，然后逐渐
Slick-Slider 尽快初始化 - 不要等待 $(document).ready(function($)
我们通过标题部分的“defer”属性加载 Slick 滑块 1.8.1。 我们想要...
我正在尝试在我的 WordPress 自定义主题中实现 Slick Slider 库，以显示从高级自定义字段插件获取的图像滑块。但是，我遇到了问题，其中 sl...
为什么 Slick Slider 显示上一个和下一个按钮而不是图标？
嗨，我正在尝试使用光滑的滑块制作滑块，一切正常，但不是在侧面显示箭头，而是在顶部和底部显示上一个和下一个按钮...
Slick Slider：slickSetOption() 不会影响行
我有一个滑块： 我有一个滑块： <div class="super-slick responsive"> <div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;> </div> <div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;> </div> <div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;> </div> <div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;> </div> </div> 滑块： $(".super-slider").slick({ dots: true, slidesToShow: 4, slidesToScroll: 4, rows: 1 }) ...一切正常，更新设置也有效，但我似乎无法使用 slickSetOption 更新行数： super_slider.slick("slickSetOption", "slidesPerRow", 2) super_slider.slick("slickSetOption", "slidesToScroll", 1) super_slider.slick("slickSetOption", "rows", 2, true) 但是当我打电话给slickGetOption时，它告诉我变化已经发生了： 控制台： > super_slider.slick("slickGetOption", "rows") > 2 这对我有用 super_slider.slick('destroy'); super_slider.slick({ rows: 2 }); 请注意，您必须指定所有光滑选项以及行
我在 Slick 滑块中使用此 CSS 来制作幻灯片： 背景过滤器：模糊（10px） 但是，当我单击显示下一张幻灯片时，CSS 模糊消失了一秒钟，然后幻灯片再次模糊。当
我使用 HTML、CSS 和 slick 创建网站横幅。在桌面上它看起来不错，但在移动设备上它看起来很小，当我尝试增加图像的高度时，图像被拉伸并且......
我制作了一个 JSFiddle 来解释我想用光滑的幻灯片做什么： 布拉布拉 我做了一个 JSFiddle 解释我想用光滑的幻灯片做什么： <div class="slider"> <div> <div class="absolute"> Blabla </div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> </div> <div> <img src="http://kenwheeler.github.io/slick/img/fonz2.png" /> </div> </div> CSS .absolute { width: 100px; height: 100px; position: absolute; top: -50px; background-color: #900; } 简而言之：第一张幻灯片中的红色框是不可见的，因为它位于隐藏了溢出的幻灯片内部。我需要该框仅成为第一张幻灯片的一部分并随幻灯片移动。 任何人都可以修复 JSFiddle 示例，使其有效，我们将不胜感激。 我发现了一个技巧，你必须在每个幻灯片元素上设置一个 margin-top 或 padding-top 。 .slick-slide{ padding-top:25px //margin-top:25px also working } 工作正常。确保红色框应该是绝对位置并且每个滑块都有相对位置。这样你的红色框就只属于那张幻灯片 .slider > div{ position: relative; } .absolute { width: 100px; height: 100px; position: absolute; top: -50px; background-color: #900; } 第一张幻灯片中的红色框将始终保持单独状态，因为它的位置为“绝对”。 但你可以解决这个问题。 absolute：该元素从正常文档流中删除，并且在页面布局中不会为该元素创建空间。该元素的位置相对于其最近定位的祖先 这就是我们添加到父 div 的原因： position:relative 现在代码将如下所示： <div class="slider"> <div style="position: relative"> <div class="absolute"> Blabla </div> <img ...> </div> <div> <img ...> </div> </div> 如果你愿意，你可以尝试一下父母的位置，看看这是如何运作的...... <div style="position: relative; left: 1">