问题标签 [react-slick]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - React-Slick 不适用于 React 中的第一次渲染
我正在尝试添加React-Slick
应用程序,但不知何故我失败了,实际上我在应用程序中添加待办事项,然后在滑块中显示待办事项列表。当我存储一些待办事项时,我正在从服务器获取数据并在第一次尝试时将其显示在滑块中,但当我再次尝试时,它会显示。我将分享我的代码,请您检查并纠正我的问题。
代码
javascript - 如何将 React.jsx 文件导入我的 HTML?
所以我一直在尝试从我的 jsx 我的 html 文件中导入图像轮播。我已将必要的脚本添加到我的 .html 和“npm install react-slick carousel”中。加载浏览器后什么都没有出现。帮小弟解围。到目前为止,这是我的代码。
HTML 文件
JSX 文件
swipe - react-slick 有问题。在手机上滑动不起作用
我遇到了 react-slick 的问题。我需要让它在移动设备上“滑动”。不幸的是swipeToSlide: true,
,我在文档中找到的似乎不起作用。
有什么解决办法吗?
这是我的设置代码示例:
javascript - slick-carousel scss 无法与使用 webpack 作为捆绑器的 react-slick 一起正常工作
当我为 slick-carousel 使用 CDN 时,它工作正常,但是当我从 npm 下载它并像这样导入它时:-
https://github.com/akiran/react-slick/issues/669
它不起作用。
由于这个原因,它的一些工作原理:-
https://www.npmjs.com/package/resolve-url-loader
但仍然不显示图像(css问题)
如何导入 slick-carousel 使其不会中断并且工作方式与使用 cdn 完全一样。
javascript - 使用图像之间的适当间距自定义 Slick 滑块设计
我正在使用react-slick
轮播功能。我很难定制以获得如下所示的设计。
如果我尝试在屏幕截图中提供图像之间的空间,其他图像就会被推开并完全消失。
这是我的代码:
我也有关于代码沙盒的工作代码。在这里,https://codesandbox.io/s/react-slick-playground-yqcm3
javascript - React-Slick 与 IntersectionObserver 的行为不符合预期
我正在尝试通过使用APIreact-slick
检测幻灯片元素何时与我的根元素相交来在幻灯片进入视口时为其设置动画。IntersectionObserver
这按预期工作。
不起作用的是,当从to react-slick
循环回时,第一个反应组件似乎在“赶上”之前暂时失去了状态——即使它已经被渲染了。:last-slide
:first-slide
我已经在两个地方演示了这一点,一次使用原生 IntersectionObserver API,一次使用围绕原生 API 的 React Wrapper - react-intersection-observer
。
到目前为止,我所拥有的完整代码在下面和这里的沙箱中:
原生:https
:
//codesandbox.io/s/react-slick-and-native-intersection-observer-cqtmv React Wrapper:https ://codesandbox.io/s/react-slick-and-react-intersection-observer- qvbum
reactjs - React slick how to enable no pause
i am trying to create infinite slideshow without pause this are my settings for the react-slick slider
this is the closest i was able to achieve but i'm still getting a slight pause
i would like to know if this even possible with react-slick or maybe there are other libraries that will match my needs
javascript - 初始化后添加更多图像时,React-slick 滑块会失真
我正在使用 React-slick 滑块来显示随机用户 API 给出的图像。我按照反应滑块的 npm 页面上给出的步骤安装了光滑的轮播并将两个 CSS 文件添加到组件中。
如果用户单击下一个箭头或将滑块向左拖动,我想向现有滑块添加更多图像,因此我使用afterChange回调来更新我的状态,以便使用此状态值作为第二个参数的 useEffect调用然后将以前的数据与新数据连接起来。
在这里,我注意到当用户单击下一步或将滑块向左拖动时,有时会出现失真。
https://stackblitz.com/edit/react-nlxodz有一个滑块和它下面的一个文本行,连续滑动滑块,你可以看到在几秒钟内,滑块下面的文本被推得更远,然后来了回到原来的地方。
如果滑块上有 flex 道具,文档建议使用以下 CSS。但是,我的代码没有弹性属性。
这个问题是因为我将数据添加到滑块的方式还是 CSS 的问题?当用户快速滑动或滑动时,是否存在不显示失真的解决方案?