无法从浮华的react中获得所需的结果

IT技术 css reactjs components slick.js react-slick
2021-05-27 11:46:44

我试图实现React slick 的多项目轮播。下面给出了所需的结果, 在此处输入图片说明 但我希望中心元素像

在此处输入图片说明

但我能走到这一步

在此处输入图片说明

我希望一次只显示三个元素,并弹出中心元素。这是我的代码。

import React, { Component } from 'react'    
import Slider from "react-slick";
import DemoGuy from './DemoGuyMentors.png';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export class Stories extends Component {
 render() {
    
  const settings = {
    className: "center",
    centerMode: true,
    infinite: true,
    slidesToShow: 4,
    speed: 500,
    autoplay:true,
    autoplayspeed:1000
  };
    return (
        <div>
            <div className="SliderWrapper">
                <Slider {...settings}>
                <div className="AchiversDetails">
                    <div className="MentorsPicAndLogoWrapper">
                        <img className="MentorImg" src={DemoGuy}></img>
                    </div>
                    <div className="MentorsDetailsWordWrapper">
                            <h3>Lorem ipppsum</h3>
                            <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
                        pellentesque metus ligula, ac elementum 
                        velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at nunc 
                        vehicula pulvinar. Aliquam erat volutpat. 
                        Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, molestie eu 
                          luctus fringilla, suscipit at ipsum.
                        </p>
                    </div>   
                </div>

                <div className="AchiversDetails">
                    <div className="MentorsPicAndLogoWrapper">
                        <img className="MentorImg" src={DemoGuy}></img>
                        
                    </div>
                    <div className="MentorsDetailsWordWrapper">
                        <h3>LOREM IPPSUM</h3>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
                        pellentesque metus ligula, ac elementum 
                        velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at nunc 
                        vehicula pulvinar. Aliquam erat volutpat. 
                        Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, molestie eu 
                        luctus fringilla, suscipit at ipsum.
                        </p>
                    </div> 
                </div>
                <div className="AchiversDetails">
                    <div className="MentorsPicAndLogoWrapper">
                        <img className="MentorImg" src={DemoGuy}></img>
                       
                    </div>
                    <div className="MentorsDetailsWordWrapper">
                            <h3>Lorem ipppsum</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                Vestibulum pellentesque metus ligula, ac elementum 
                                velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at 
                                nunc vehicula pulvinar. Aliquam erat volutpat. 
                                Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, 
                               molestie eu luctus fringilla, suscipit at ipsum.
                            </p>
                    </div>   
                </div>

                <div className="AchiversDetails">
                    <div className="MentorsPicAndLogoWrapper">
                        <img className="MentorImg" src={DemoGuy}></img>
                      
                    </div>
                    <div className="MentorsDetailsWordWrapper">
                        <h3>LOREM IPPSUM</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
                            pellentesque metus ligula, ac elementum 
                            velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at 
                            nunc vehicula pulvinar. Aliquam erat volutpat. 
                            Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, 
                           molestie eu luctus fringilla, suscipit at ipsum.
                        </p>
                    </div> 
                </div>

                <div className="AchiversDetails">
                    <div className="MentorsPicAndLogoWrapper">
                        <img className="MentorImg" src={DemoGuy}></img>
                      
                    </div>
                    <div className="MentorsDetailsWordWrapper">
                        <h3>LOREM IPPSUM</h3>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
                        pellentesque metus ligula, ac elementum 
                        velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at nunc 
                        vehicula pulvinar. Aliquam erat volutpat. 
                        Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, molestie eu 
                            luctus fringilla, suscipit at ipsum.
                        </p>
                    </div> 
                </div>
                </Slider>
            </div>
        </div>
    )
  }
}

export default Stories

注意:当我更改 slideToShow:3 时。只有两个元素是完全可见的,两边各有一半。以下是我使用过的 CSS

.AchiversDetails{
 box-shadow: 0px 4px 52px rgba(70, 74, 140, 0.24);
 padding: 3rem;
 border-radius: 2%;
}


.slick-slide {
  margin: 27px 27px;
}
.slick-list {
  margin: 0 -27px;
}

其余的分类不包含任何 css 属性。

所需的最终输出是 在此处输入图片说明

我可以实现盒子里面的css。但它的滑块我无法实现。

1个回答

centerMode除非您为slidesToShow设置使用奇数值,否则无法正常工作您应该能够使用centerPadding选项而不是您的slick-slideslick-listCSS来调整幻灯片之间的填充

  const settings = {
    className: "center",
    centerMode: true,
    centerPadding: '60px',
    infinite: true,
    slidesToShow: 3,
    speed: 500,
    autoplay:true,
    autoplayspeed:1000
  };

为了让你的中心幻灯片比其他幻灯片大,你可以用 CSS 定位它并放大它:

.slick-center .AchiversDetails {
    transform: scale(1.2);
}