问题描述
我一直在尝试使用 centermode 设置使 react-slick 工作。 它在某些页面上可以完美运行,但在其他页面上,它会将画布视为较小的宽度进行计算,从而导致屏幕右侧出现空白区域。
欢迎提出任何建议。
import { Component } from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';
import httpsWithQuality from '../../utils/httpsWithQuality';
import dynamic from 'next/dynamic';
const LightBoxFullScreen = dynamic(() => import('./LightBox'));
const Div = styled.div`
img {
width: 995px;
height: 400px;
}
@media screen and (min-width: 568px) {
.slick-slide {
margin-left: 2.5px;
margin-right: 2.5px;
}
}
height: 400px;
background: #e9e9e988;
.slick-slider,.slick-track,.slick-list,.slick-slide,.slick-track {
height: 400px;
max-height: 400px;
}
img {
height: 400px;
max-height: 400px;
object-fit: cover;
width: 100%;
/* width: 1060px; */
background: #e9e9e988;
}
@media screen and (max-width: 768px) {
height: 300px;
.slick-slider,img {
height: 300px;
}
}
@media screen and (max-width: 568px) {
height: 250px;
.slick-slider,img {
height: 250px;
}
}
.relative {
position: relative;
}
button.view-all {
position: relative;
width: 100px;
left: 107px;
top: 8px;
border: none;
color: #ababab;
background: transparent;
font-weight: bold;
&:focus {
outline: none;
}
&:hover {
color: black;
}
}
.view-all-container {
width: 100%;
max-width: 314px;
height: 38px;
background: #fff;
Box-shadow: 0 2px 15px #0000001f;
position: absolute;
left: calc(50vw - 157px);
top: -15px;
border-radius: 26px;
}
.cursor-pointer {
cursor: pointer;
}
`;
const ButtonR = styled.button`
position: absolute;
right: calc(50vw - 150px);
z-index: 1;
bottom: -15px;
font-weight: bold;
color: #ababab;
border: none;
background-color: transparent;
&:focus {
outline: none;
}
&:hover {
color: black;
}
`;
const ButtonL = styled.button`
position: absolute;
left: calc(50vw - 150px);
z-index: 1;
bottom: -15px;
font-weight: bold;
color: #ababab;
border: none;
background-color: transparent;
&:focus {
outline: none;
}
&:hover {
color: black;
}
margin-top: 8px;
`;
export default class Carousel extends Component {
state = {
show: false,currentIndex: 1,};
render() {
const SliderRight = ({ onClick }) => (
<ButtonR type="button" onClick={onClick}>
Next <i className="fa fa-chevron-right"></i>
</ButtonR>
);
const SliderLeft = ({ onClick }) => (
<ButtonL type="button" onClick={onClick}>
<i className="fa fa-chevron-left"></i> Prev
</ButtonL>
);
const settings = {
dots: false,lazyLoad: true,infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1,initialSlide: 1,autoplay: true,autoplaySpeed: 6000,nextArrow: <SliderRight text="N" to="right" />,prevArrow: <SliderLeft text="P" to="left" />,centerMode: true,centerPadding: '20%',beforeChange: (prev,next) => {
this.setState({ currentIndex: next });
},responsive: [
{
breakpoint: 1300,settings: {
slidesToShow: 1,},{
breakpoint: 1200,centerPadding: '25%',{
breakpoint: 768,centerPadding: '15%',{
breakpoint: 568,centerMode: false,centerPadding: '0',],};
return (
<>
<Div>
<Slider {...settings} className="relative">
{this.props.urls.map((image,id) => (
<div
key={'carousel#' + id}
className="cursor-pointer"
onClick={() => this.setState({ show: true })}>
<picture>
<source
media="(min-width: 992px)"
srcSet={httpsWithQuality(image.image_url,600)}
height="400"
/>
<source
media="(max-width: 568px)"
srcSet={httpsWithQuality(image.image_url,300)}
height="250"
/>
<img
src={httpsWithQuality(image.image_url,450)}
alt={image.filename}
// className="img-responsive"
height="300"
/>
</picture>
</div>
))}
</Slider>
<div className="relative">
<div className="view-all-container">
<button
className="view-all"
onClick={() => this.setState({ show: true })}>
View All
</button>
</div>
</div>
</Div>
{this.state.show && (
<LightBoxFullScreen
close={() => this.setState({ show: false })}
images={this.props.urls}
photoIndex={this.state.currentIndex}
/>
)}
</>
);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)