slick.js 相关问题

垂直对齐内容slickslider

我一直在努力让我的内容垂直对齐，但实际上没有解决它。我尝试了adaptiveHeight参数，但它确实没有达到我想要的效果。 小提琴：http://jsfiddle.net/fmo50w7n/400

slick.js 轮播如何从 slick-dots 中删除数字

我一直在浏览 slick-theme.css，但我不知道如何隐藏点后插入的数字。 谁能启发我吗？

如何使用光滑滑块点（无限模式开启）走最短路径？

我正在使用无限模式下的光滑滑块，我希望这些点采用最短路径。例如：我在第一张幻灯片上，单击最后一个点，它应该向左移动一张幻灯片而不是 4 sl...

<div>中的水合子节点不匹配：服务器渲染元素包含的子节点少于客户端 vdom

水合子节点不匹配：服务器渲染元素包含的子节点少于客户端 vdom。 Nuxt 链接在 Slick 中使用时不起作用 它复制了这个内容而不光滑.. 我看...

如何创建带有进度条的Slick滑块

我需要一个带有点计时器分页的滑块，例如http://www.apple.com。我使用了 slick.js。我需要制作一个进度条，而不是点。 如何用进度条替换分页按钮？ ...

如何创建具有这种显示动画的滑块？

我正在尝试弄清楚如何创建具有这种揭示效果的滑块。

FancyBox 带有 Slick 滑块问题

我添加了 fancybox 和 slick 滑块，它工作得很好，但是当你在 fancybox 内滑动图像时，有一个问题我无法解决，假设你在滑块中有 2 个图像，然后你点击...

光滑的滑块 - 具有不同滑动宽度的平滑滚动

当我有不同的幻灯片宽度（variableWidth：true）时，我想构建一个平滑的滚动滑块（Slick slider）。 有没有办法让我的第二个滑块始终具有相同的速度（与第一个滑块一样......

视频和图像轮播

这里是一个编码菜鸟:)我有带有图像和视频的光滑滑块图像轮播。 由于某种原因，视频仅在设置为自动播放时才会播放。我无法控制使其播放？ 这是我的...

动态设置当前幻灯片（Slick）为750px

我有一个响应式光滑滑块，配置为一次显示 2 张幻灯片。 我希望 .slick-current （第一个可见的）幻灯片始终大于第二个。 问题是，每一个前任...

自定义箭头反应光滑

我正在使用react-slick在我的项目中创建一个轮播。 我已经阅读了文档并尝试了不同的方法，但找不到一种方法来完全按照我需要的方式自定义它......有人吗......

如何在 Slick 轮播项目之间添加空格

我想在两个光滑的轮播项目之间添加空间，但不想要带有填充的空间，因为它减少了我的元素大小（我不想要这样）。 $('.单项').slick({

使用react-slick更改当前幻灯片

我正在使用react-slick库制作滑块，我想更改活动幻灯片和滑块顶部的幻灯片。例如，如果我单击当前页面中的按钮...

Slick Slider 不适用于 Shopifyawn 的产品推荐部分

我正在尝试在产品推荐部分显示 6 个产品，并且我想在滑块中显示它们。我使用光滑滑块创建所有滑块，但此时它不起作用，光滑滑块不工作

光滑的滑块在弹性容器中不起作用

我正在尝试将光滑的轮播（http://kenwheeler.github.io/slick/）垂直居中在一列中。所以我使用display:flex;对齐项目：居中；在列（光滑滑块的容器）上，但它......

光滑的滑块自定义点 - 自动播放

我将此滑块设置为 autoplay=true，但即使我将属性 autoplay 设置为 true，它也会自动播放 我将此滑块设置为 autoplay=true，但即使我将属性 autoplay 设置为 true，它也会自动播放 <div class="slick_slider_main slider_custom_dots" data-slick='{ "dots": true, "arrows": true, "infinite": true, "centerMode": false, "slidesToShow": 1, "centerPadding": "190px", "slidesToScroll": 1, "autoplay": true, "autoplaySpeed": 20, "speed": 800, }'> 您的滑动滑块配置似乎可能存在一些问题。您可以检查以下几件事： 自动播放速度值： autoplaySpeed 属性表示启用自动播放时每张幻灯片之间的时间（以毫秒为单位）。您已将其设置为 20，该值非常低，可能会导致滑块移动太快或无法正常工作。尝试将其设置为更高的值，例如 2000（2 秒）。 数据属性引号： 确保数据属性引号的格式正确。在您的代码中，它们似乎是单引号。确保它们的格式正确为双引号，因为 JSON 通常需要在属性名称和字符串值两边加上双引号。 data-slick='{ "dots": true, "arrows": true, "infinite": true, "centerMode": false, "slidesToShow": 1, "centerPadding": "190px", "slidesToScroll": 1, "autoplay": true, "autoplaySpeed": 2000, // Adjust this value as needed "speed": 800 } 3.包括 Slick JS 和 jQuery： 确保您的项目中已包含 jQuery 和 Slick JS。 Slick JS 依赖于 jQuery，因此请确保 jQuery 在 Slick JS 之前加载。 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/slick.min.js"></script> 4。初始化 Slick 滑块： 设置数据属性后，请确保初始化平滑滑块。这通常在脚本部分完成。 <script> $(document).ready(function(){ $('.slick_slider_main').slick(); }); </script>

WordPress 中的光滑滑块正在生成随机 <p> 标签 PHP

我有一个灵活的滑块，可以在 WordPress 中拉动 WooCommerce 产品图像。我已经为这个函数创建了一个简码，但它似乎是随机添加的 我有一个灵活的滑块，可以在 WordPress 中拉出 WooCommerce 产品图像。我已经为这个函数创建了一个简码，但它似乎是随机添加的 remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' ); 我尝试使用上面的这两个过滤器似乎没有改变任何东西。 function product_images_slick_carousel_shortcode() { ob_start(); ?> <div class="product-images"> <?php global $product; $attachment_ids = $product->get_gallery_image_ids(); if ($attachment_ids) { foreach ($attachment_ids as $attachment_id) { $image_url = wp_get_attachment_url($attachment_id); if ($image_url) { echo '<div><img src="' . esc_url($image_url) . '"></div>'; } } } else { $thumbnail_id = get_post_thumbnail_id($product->get_id()); $thumbnail_url = wp_get_attachment_url($thumbnail_id); if ($thumbnail_url) { echo '<div><img src="' . esc_url($thumbnail_url) . '"></div>'; } } ?> </div> <script> jQuery(document).ready(function ($) { $('.product-images').slick({ // Slick carousel options autoplay: true, autoplaySpeed: 4000, arrows: true, slidesToShow: 4, slidesToScroll: 1 // Add more options as needed }); }); </script> <?php return ob_get_clean(); } add_shortcode('product_images_slick_carousel', 'product_images_slick_carousel_shortcode'); 解决问题的一种方法是找出为什么你的remove_filter命令不起作用，因为这显然是根本原因。 解决此问题的另一种方法如下： <script> jQuery(document).ready(function ($) { $('.project-images p').remove(); $('.product-images').slick({ // Slick carousel options autoplay: true, autoplaySpeed: 4000, arrows: true, slidesToShow: 4, slidesToScroll: 1 // Add more options as needed }); }); </script>

导入光滑的轮播主题 css 会在 webpack 构建上引发错误

我正在尝试将 slick-theme.scss 在我的父 scss 中导入为 @import“../node_modules/slick-carousel/slick/slick-theme.css”； 但在捆绑过程中，我在 slick-theme.sc 中导入的文件上遇到错误...

如何将DIV定位在视口底部并用图像填充剩余的垂直高度？

我正在开发一个 Slider Slicker 轮播，其中图像轮播显示在视口底部，从轮播中选择的活动图像显示在其上方。我正在使用...

隐藏的萌芽视频，嵌入在光滑滑块的 iframe 中，无法播放

我希望我的 iframe 可以在光滑的滑块内拖动（左/右），为了实现这一点，我创建了一个覆盖 div（iframe-overlay），并使用 SproutVideo Javascript Player API，我绑定了一个 ev.. .