标签: react-slick

我们在我们的应用程序中使用React-Slick作为Carousel效果.滑块中的内容是动态的,Carousel项目的长度可以在4到20之间.

问题是即使所有内容的宽度小于滑块轨道的宽度,左右箭头也能工作.

在这种情况下隐藏或禁用这些箭头的解决方案/解决方法是什么？

伙计们，我在react-slick滑块方面遇到了问题。我在滑块上渲染卡片取决于数组长度。我还渲染自定义next和previous按钮，触发next和previous功能来更改幻灯片。我也想让这个滑块响应。这意味着它具有根据定义的设置滚动幻灯片的功能。

我为断点定义的设置：

992 > 幻灯片滚动 = 3

577 - 991 幻灯片滚动 = 2

0 - 576 幻灯片滚动 = 1

next没有向前滑动时该按钮将被禁用，当没有后向滑动时该previous按钮将被禁用。为了实现此功能，有一个名为 afterChange 的函数可返回幻灯片的当前活动索引。所以我在state. 但我认为我的next按钮逻辑不正确。

我的问题是什么？

• refresh调整窗口大小时是否有任何方法可以调整滑块，因为幻灯片没有根据breakpoints?

• 即使前面没有幻灯片，该next按钮也不会在断点处禁用(0 - 576)。

• 当用户更改单张幻灯片然后调整窗口大小以移动到下一张幻灯片时，该Next按钮将变为非活动状态。

我认为问题在于我写在renderArrows函数内部的逻辑。

看到这个：

代码沙盒：查看此

代码：

import React, { useState, useRef } from "react";
import Slider from "react-slick";

// Constant Variables
// …

我当时正在做一个项目，我使用了React、Next.js和Tailwind CSS，并且我在样式上做了一些自定义，比如使用react-slick作为slider，我将自定义CSS应用到react-slick滑块类并根据需要制作了滑块到...但同时我正在尝试将默认的自定义字体应用于我的整个项目。在这种情况下，我对文件进行了一些更改

文件tailwind.config.js

theme: {
  fontFamily: {
    customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
  },
  extend: {},
},

之后，我得到一个 编译错误：

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next /dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/slick-carousel/slick/光滑主题.css

ReferenceError：默认主题未定义

我的 Tailwind CSS Config.js文件供参考

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      customfontname: ['Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif', ...defaultTheme.fontFamily.customfontname],
    },
    extend: {
      fontFamily: {
        customfontname: ['Segoe UI',
                         'Helvetica Neue',
                         'Arial', …

我正在使用react-slick-slider，我想要实现的是制作自定义箭头。
所以代码看起来像这样：

const FeedbackSlider = () => {
const [isLargeScreen] = useMediaQuery("(min-width: 1050px)")

const sliderRef = useRef<Slider>()

const prev = () => {
    sliderRef.current?.slickPrev()
}
const next = () => {
    sliderRef.current?.slickNext()
}
const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: (isLargeScreen ? 2 : 1),
    slidesToScroll: 1,
    prevArrow: (isLargeScreen && <PrevArrow />),
    nextArrow: (isLargeScreen && <NextArrow />)
};
return (
    <Box px={['2', '4', '8', '16']} mx='auto' pt='12'>
        <Slider ref={sliderRef} {...settings}>
           // slider cards...
        </Slider>
        {!isLargeScreen && …

我计划将React-slick库添加到我的 nextjs 项目中以用于图像滑块，但遇到了问题

尝试安装“react-slick”和“slick-carousel”，如文档中提到的

yarn add react-slick
yarn add slick-carousel

但是一旦我在 _app.tsx 文件中导入 css，就会出现错误

找不到模块：无法解析“~slick-carousel/slick/slick-theme.css”

_app.tsx 文件

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import "@styles/global.scss";
import { Provider } from "react-redux";
import store from "@redux/store";  
import { MuiThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "src/createMiuitheme";


import "~slick-carousel/slick/slick.css";               //here
import "~slick-carousel/slick/slick-theme.css";         //here

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  // const theme = responsiveFontSizes(createTheme()); …

我遇到了反应灵敏的问题.主题可能没有意义,但我会尝试详细解释这个场景.看到这个例子小提琴在行动中看到的问题.

var DemoSlider = React.createClass({
getSlides(count) {
var slides = [];
for(var i = 0; i < count; i++) {
    slides.push((<img key={i} src='http://placekitten.com/g/400/200' />));
}
return slides;
},

render: function() {
var settings = {
    dots: false,
  infinite: false,
  slidesToShow: 3,
  slidesToScroll: 3
}

var slides = this.getSlides(this.props.count);

return (
    <div className='container'>
    <Slider {...settings}>
        { slides }
    </Slider>
  </div>
);
}
});

在此演示中,最初滑块显示20张幻灯片(每页3张).我们的想法是,如果单击该按钮,它将生成一个随机数,这将是新的幻灯片数.代码相当简单,不言自明.

要重现此问题,请继续单击"下一步"箭头,直至到达最后一张幻灯片.
2.单击"单击"按钮以生成新的随机数量的幻灯片.

我的期望是幻灯片将返回到第一张幻灯片,但不会停留在之前的页面上.更糟糕的是,如果新幻灯片数量低于之前的数量,用户将看到没有幻灯片的空白页面.单击"上一个"错误后,他/她可以转到上一个幻灯片,一切正常,但初始显示会破坏用户体验.

是否有一些我在代码中添加的东西,或者这是一个错误？

谢谢,阿比.

我正在使用react-slick，并且我有自己的自定义箭头。该滑块不是无限循环，我想隐藏循环开始和结束处的箭头。所以基本上在开始时 PrevArrow 应该被隐藏，最后 NextArrow 应该被隐藏。我试图根据状态变化设置隐藏类名称。然而，尽管状态正在正确更改，但类名并未更改。你知道这段代码有什么问题吗？以及如何让它发挥作用？

下面是我对 Slider 和渲染 Slider 的组件的设置。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider from 'react-slick';
import Arrow from '../slider/Arrow';


export default class CityCarousel extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayLeftArrow: true,
            displayRightArrow: true
        };


        this.slidesToShow = 5;
        this.sliderSetting = {
            dots: false,
            arrows: true,
            infinite: false,
            initialSlide: 0,
            slidesToShow: this.slidesToShow,
            slidesToScroll: 1,
            speed: 500,
            rows: 0,
            nextArrow: <Arrow
                    styleClassName={`city-carousel__right ${
                        this.state.displayRightArrow ? '' : 'city-carousel__right--hide'
                    }`}
                    direction="right" …

我的代码中有什么问题这是一个滑块:

<Slider {...settings}>
            {slides.map(function(item){
                return (
                    <div key={item.id} className="item-slider" 
                        style={{background: `url(images/covers/${item.cover})`}}>
                        <div className="caption">
                            <h4>{item.topic}</h4>
                            <p>{item.title}</p>

                        </div>
                    </div>
                    )  
            })}
        </Slider>

我正在使用react- slick,我测试了如果item.cover正在接收一些数据.它确实如此.但是当我坚持它的风格它没有出现并检查它,并没有收到任何错误.

示例:代码.codesandbox.io/s/5v0308l68k(无法上传图片)

我不知道为什么react-slick 在形成滑块时添加了以下内联属性。

width: 100%; display: inline-block;

因此，我的应用程序自己的 CSS 不起作用并且行为不同。请帮助我理解并解决这个问题。

请点击提到的链接，我试图模仿与react-slick相关的问题 https://stackblitz.com/edit/react-b8wcgf

我正在使用react-slick（https://react-slick.neostack.com/）来制作我的博客的简单滑块组件。现在，我想简单地将position:relative和z-index:50设置为类slack-current（由Slider组件生成）的div，但找不到任何方法来做到这一点。我将 NextJS 与以下组件一起使用：

function Carousel({ blogs }) {
  const [imageIndex, setImageIndex] = useState(0);

  const transformDate = (date) => {
    return date.substring(0, 10);
  };

  const NextArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
        <FaArrowRight />
      </div>
    );
  };

  const PrevArrow = ({ onClick }) => {
    return (
      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
        <FaArrowLeft />
      </div>
    );
  };

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    nextArrow: …