无法从反应光滑获得理想的结果 [英] Unable to get desired result from react slick

问题描述

我正在尝试实施但我希望中心元素像弹出一样

I was trying to implement React slick's multiple items carousel. The desired result is given below but I want the center element to pop out a little just like

但是我能够做到这一点

我只希望一次弹出三个元素，然后弹出中心元素.这是我的代码.

I want only three elements visible at a time and center element to be popped out. Here is my code.

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

Note: When I change the slideToShow:3. Only two elements are entirely visible and a half on both sides. Following is the CSS I have used

.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属性.

Rest of the classed doesn't hold any css properties.

所需的最终输出是

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

I can implement the css which is inside the box. But its the slider I'm unable to implement.

推荐答案

centerMode 无法正常工作，除非您为 slidesToShow 设置使用了奇数.您应该能够使用 centerPadding 选项而不是您的 slick-slide 和 slick-list CSS来调整幻灯片之间的填充.

centerMode does not work correctly unless you use an odd value for the slidesToShow setting. You should be able to tweak the padding between slides with the centerPadding option instead of your slick-slide and slick-list CSS.

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

要使您的中心幻灯片比其他幻灯片更大，您可以使用CSS对其进行定位并按比例放大:

To get your center slide to be larger than the others, you can target it with CSS and scale it up:

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

这篇关于无法从反应光滑获得理想的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！