标签: react-slick

我正在使用反应光滑的滑块。问题在于项目顺序：第一个项目呈现为最后一个。但是如果无限是假的，第一项丢失，最后一项是空白。

import React from 'react';
import Slider from "react-slick";

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const { config } = this.props;
        const slideItems = config.items;

        const data = slideItems.map((item,index) => {
            let textStyle = config.textStyle;
            let titleSize = config.titleSize;
            let urlType = config.urlType;
            let showContent = config.showContent;
            let slideItemStyle = {
                "max-height": config.sliderHeight.indexOf("px")==-1?(config.sliderHeight+"px"):config.sliderHeight
            }
            let style = {
                "background-color": config.backgroundColor
            }
            let actionTarget = item.actionTarget ? "_blank" : "_parent";
            return <div className="slide-item"> …

我正在使用 react-slick 在我的项目中创建一个轮播。我已经通读了文档并尝试了不同的方法，但找不到完全按照我需要的方式对其进行自定义的方法...有谁知道是否有办法让 nextArrow 显示在图像上/前面而不是在图像上这是正确的？请参阅下图以获得所需的结果： 图像

谢谢你的帮助！

我正在尝试实现一个反应流畅的轮播，但我无法将图像垂直居中。这里演示了这个问题。

https://codesandbox.io/s/react-slick-playground-o7dhn

这是问题所在

图像不居中：

• Flexbox 属性不起作用（红色 div 是带有 的 Flexbox justify-content: center; align-items: center;）
• margin:auto仅适用于水平对齐（如果我使用 Flexbox，则不必设置）
• 我无法摆脱上边距（即使在padding:0pxdiv 和margin-top:0px图像上）因此，任何高度为 400px 或更高的图像都会被移动和切断（div 的高度为 400px）

我如何解决它。

我有一个 React 光滑的旋转木马，我尝试根据自己的方便来设计它的样式。我已将 Slider 组件包装在样式组件中，但我无法覆盖任何类的任何样式。

这是我写的：

const StyledSlider = styled(Slider)`
&.slick-list{
  padding:0;
}`;

export default function App() {
  return (
    <StyledSlider {...settings}>
      {images.map((image, i) => {
        return (
          <div key={i}>
            <Image src={image} alt="img" />
          </div>
        );
      })}
    </StyledSlider>
  );
}

它根本不起作用。如何修复它？这里还有一个沙箱，以防万一： https: //codesandbox.io/s/cranky-noether-1hdhr ?file=/src/App.js

在构建使用 jQuery 插件提供大部分功能的网站后，我最近转向 React。为了创建图像滑块 + 灯箱，我曾经将slick.js与halkaBox.js或SimpleLightbox（这很容易）结合使用。

现在我正在使用 React，我发现react-slick是一个很棒的滑块组件，但我不确定如何最好地向它添加支持触摸的灯箱功能。是否有支持触摸的 React 灯箱组件与 react-slick 搭配得很好？有没有合适的方法将像halkaBox.js这样的 JS 插件与像 react- slick 这样的 React 组件结合起来？

任何指导将不胜感激！

当我在 react-slick 上有 4 张或更多照片时，我试图让下一个和上一个箭头显示，但它们没有出现。处理 3 张或更少的照片时效果很好。

这是代码的链接。 https://codesandbox.io/s/wyyrl6zz3l

我使用了 React slick PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods

我将“Infinite”设置为 false，因此轮播中不会显示循环。现在，如果当前显示的幻灯片之前没有可用的幻灯片，我想禁用上一个按钮，反之亦然，我想禁用下一个按钮。

官方文档中没有任何选项。有办法实现这个目标吗？

我遇到这个问题已经有一段时间了，它似乎影响了我的所有页面。在评论了我的所有组件后，我发现问题仅在使用react slick后出现。我在检查中找不到任何元素上的任何额外填充或边距，但整个页面向左滚动一些像素，并在整个页面从上到下留下空白，尤其是在 Chrome 和 Opera 上。

我尝试将自定义 CSS 添加到生成的类中，以强制宽度100vw, 100%也用于!important标记body，padding: 0; margin: 0但问题仍然存在。也尝试更改settings滑块上的 ，看看是否是某些参数导致的，但仍然没有变化。所以我在 Code Sandbox 上重新创建了一个简单版本的问题

代码沙箱上的完整代码

我的CSS

body {
  margin: 0;
  padding: 0;
}

.App {
  width: 100%;
  background: #272727;
}

.app-slider-div {
  width: 200px;
  padding: 30px;
  background: #272727;
}

.app-slider-title {
  font-size: 20px;
  margin-bottom: 30px;
  color: white;
}

.app-slider-div img {
  width: 100%;
}

我的组件

import "./styles.css";

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default …

我试图在 min-width: 768px 处禁用反应滑块，但反应光滑滑块似乎仅支持最大宽度。我正在使用responsive光滑设置中的属性，并且根据文档，这需要一个断点以及该断点的设置。然而，断点是最大宽度而不是最小宽度，我试图在断点 768px 处使用“unslick”禁用轮播。有没有办法可以在 min-width: 768 而不是 max-width 处禁用轮播？

    var settings = {
        dots: true,
        infinite: true,
        repsponsive: [
            {
                breakpoint: 768,
                settings: 'unslick'
            }
        ],
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };