标签: react-slick

我正在使用反应光滑。我想一次显示四个项目。我正在动态显示数据。

如果我在轮播中有单个项目，则会重复填充四个项目的位置。

这是我的代码：

const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
};

<Slider {...settings}>
  //mapping data
</Slider>

谢谢

我正在使用react-slick并且我很难弄清楚这种奇怪的width=0行为是怎么回事。我在 github repo 上遇到了这个问题，但我还没有解决它。我的图像不显示。我可以解决这个问题的任何想法？谢谢！这是相关的代码：

  render() {

var settings = {
 dots: false,
 infinite: false,
 speed: 2500,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2500,
 useCSS: false
};

 <section className="text_container">
      <div className="first_col">
      <Slider {...settings}>
      <img src="xx" />
      <img src="xx" />
       <img src="xx" />
      </Slider>
      </div>
      <div className="second_col">
        <p>
           blablabla
        </p>
      </div>

.section_2 .text_container{
width: 94.1vw;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
    align-items: flex-start;
margin-top: 5vw;
margin-bottom: 0;


}

.section_2 .text_container .first_col img{
    height: 25.5vw;
    display: block;
    width: …

在这里反应新手。我的应用程序使用create-react-app，而我正在使用react-slick作为轮播。我正在尝试按照安装程序中提供的指示进行操作，但是以下操作对我不起作用：

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

我收到以下错误：

./src/components/Homepage.scss Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'

如果我将CDS从CDN添加到index.html，它会起作用，但是我宁愿避免该网络调用，因为我认为它会影响初始加载时页面的呈现。

我试着按照说明配置创建反应的应用程序内使用相对路径，但是，这不是为我工作无论是。也许我完全误会了，但是我认为〜表示法允许我从/ node_modules中的包中导入scss。

任何建议/澄清将不胜感激。

更新：从我的webpack.config文件中添加设置（大多数是create-react-app中的默认设置）。

{
            test: /\.scss$/,
            use: [
              require.resolve('classnames-loader'),
              require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: 1,
                  localIdentName: "[name]__[local]___[hash:base64:5]"  
                },
              },{
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 6 versions',
                        'Firefox ESR',
                        'not ie < 9', // React …

我已经为我的网站实现了 React Slick Slider，它适用于桌面视图并相应地采用适当的宽度，但如果我切换到响应式视图，容器的宽度不正确并且看起来全部扭曲。

我尝试用 CSS 修复它，给slick-trackdiv 设置 100% 宽度，但没有任何效果。

以下是容器：slick-track，下面是添加的内联 CSS：

width: 2.14748e+08px;
opacity: 1;
transform: translate3d(-8.05305e+07px, 0px, 0px);

以下是我在组件中初始化滑块的方式：

const settings = {
            dots: false,
            infinite: true,
            speed: 500,
            cssEase: 'linear',
            slidesToShow: this.props.data && this.props.data.upSell && this.props.data.upSell.length>=5?6:this.props.data&& this.props.data.upSell && this.props.data.upSell.length,
            rtl: rtl === "en" ? false : true,
            slidesToScroll: 1,
            asNavFor: null,
            arrows: false,
            initialSlide: rtl==="en"?0:2,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        initialSlide: rtl==="en"?0:3,
                        dots: false
                    }
                }
            ] …

我为react-slick设置了以下配置：

infinite: true,
speed: 500,
slidesToShow: 6,
slidesToScroll: 5,
swipeToSlide: true,
autoplay: true,
arrows: false
dots: false

每次滑动项目时，整个页面都会挂起。例如，除了这个浮华之外，我还有一张下表。当我尝试在光滑的滑动时滚动我的表格时，它会挂起，它会等待光滑的滑动完成，然后我才能滚动我的表格。打开模态窗口时也是如此。如果当我打开一个模态窗口时 slick 正在滑动，它会在显示我的模态窗口之前挂起，直到 slick 完成幻灯片。怎么解决这个挂的问题？

似乎即使只是使用 slick 本身也会导致页面在幻灯片滑动时挂起。

我目前正在使用"typescript": "^3.7.5"和"react-slick": "^0.25.2"。

我面临的问题是我无法使用自动播放方法slickPlay以及slickPause新的useRef挂钩和打字稿。

目标：能够使用播放/暂停按钮暂停自动播放和恢复自动播放。我的播放/暂停按钮将位于分页点旁边。

我的代码：

import React, { useStateuseRef } from 'react';

const myComponent = () => {
  const [autoPlayOn, setAutoPlayOn] = useState<boolean>(true);
  const sliderRef = useRef<typeof Slider | null>(null);
  
  <Slider
    ref={sliderRef}
    appendDots={(dots): JSX.Element => (
      <MyButton
        onClick={() => {
          setAutoPlayOn(!autoPlayOn);
          if (autoPlayOn) {
            sliderRef.slickPlay();
          } else {
            sliderRef.slickPause();
          }
        }}
      />
    )}
    {...otherSettings}
  >
}

我收到的类型错误是：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<Settings>): Slider', …

这是我正在使用的旋转木马：react-slick

我希望能够使用鼠标向上或向下滚动事件滚动浏览每张幻灯片。

向上滚动以递增，向下滚动以递减。

在网上找到了我真正需要的示例-只是不确定如何将其转换为反应解决方案。

示例：https：//codepen.io/Grawl/pen/mMLQQb

在基于“反应”组件的方法中实现此目标的最佳方法是什么？

这是我的react组件：

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.css';
import ReactSVG from 'react-svg';
import Slider from 'react-slick';


import MobileSVG from '../../../assets/svg/icons/Mobile_Icon_Option2.svg';
import TabletSVG from '../../../assets/svg/icons/Tablet_Icon_Option2.svg';
import DesktopSVG from '../../../assets/svg/icons/Desktop_Icon_Option2.svg';

const deviceIcons = {'mobile': MobileSVG, 'tablet': TabletSVG, 'desktop': DesktopSVG};

import BackToTopButton from '../BackToTopButton';

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

    }

    render() {
        const {productData} = this.props

        //Slider settings
        const …

我使用了 react-slick 并使用 Slider 组件制作了一个旋转木马。代码如下，

const carousel = (props) => {
    return (
        <div style={{ height: '50%', marginTop: '20px' }}>
            <Slider {...settings}>
                <div className={text__bar}>
                    <div >
                        <font>Lorum Ipsum 1</font>
                    </div>
                    <div className={slide1} />
                </div>
                <div className={text__bar}>
                    <div>
                        <font>Lorum Ipsum 2</font>
                    </div>
                    <div className={slide1} />
                </div>
                <div className={text__bar}>
                    <div>
                        <font>Lorum Ipsum 3</font>
                    </div>
                    <div className={slide1} />
                </div>
            </Slider>
            <div className={purple__bar}></div>
        </div>
    );
};

和设置对象，

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: …

我将其添加react-slick到我的项目中以显示carousel. 我想使用位于滑块内容顶部的自定义下一个和上一个按钮来控制我的滑块。所以我遵循了自定义箭头文档，但我不想在光滑的内容中显示我的按钮，我想将控件提供给滑块内容上方的按钮。如何实现这一目标？我包含了我创建的组件中的代码。

import React from 'react';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

function SampleNextArrow(props) {
  const { onClick } = props;
  return (
    <React.Fragment>
      <Button
        onClick={onClick} className="slickRight">
        Next
      </Button>
    </React.Fragment>
  );
}
function SamplePrevArrow(props) {
  const { onClick } = props;
  return (
    <React.Fragment>
      <Button
        onClick={onClick} className="slickLeft">
        Prev
      </Button>
    </React.Fragment>
  );
}

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

我有以下带有 Slick carousel 的 React 应用程序。我创建了一个自定义 Next 按钮，需要执行该slickNext()方法才能继续下一张幻灯片。Slick carousel 文档和一些问题的答案提到了以下调用slickNext()方法的方式。

问题是我收到了错误 slider.slick is not a function。

这是我迄今为止尝试过的

gotoNext = () => {
    var slider = document.getElementsByClassName("sliderMain")[0];
    console.log("set", slider)
    slider.slick("slickNext");
}

const SampleNextArrow = (props) => {
        const { className, style } = props;
        return (
            <div
                className={className}
                onClick={this.gotoNext}
            />
           );
        }

    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        swipe: false,
        nextArrow: <SampleNextArrow className="customSlickNext" />,
    };

    <Slider
       id="sliderMain"
       {...settings} …