小编Nan*_*jol的帖子

如何将箭头控件设置为自定义按钮

我将其添加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 = {}
  } …
Run Code Online (Sandbox Code Playgroud)

reactjs react-slick

3
推荐指数
1
解决办法
4923
查看次数

显示 React Skeleton Loader 直到图像完全加载

我的组件中有一个react-loading-skeleton,我的页面中有一个使用 img 标签加载的静态图像,我想显示一个骨架组件,直到图像加载。我尝试了react.lazy和suspense,但它只显示直到组件加载不起作用,直到图像完全加载。

import React from 'react';

export default class SlideItems extends React.Component {
    render() {
        return (
            <div>
                <img src={require("./someImg.jpg")}/>
            </div>
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

reactjs

3
推荐指数
1
解决办法
2万
查看次数

如果 React slick 中当前幻灯片之前或之后没有可用的幻灯片,请禁用上一页或下一页按钮。(上一个下一个方法)

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

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

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

reactjs react-slick

1
推荐指数
1
解决办法
8147
查看次数

标签 统计

reactjs ×3

react-slick ×2