无法从反应光滑中获得所需的结果

Posted

技术标签:

【中文标题】无法从反应光滑中获得所需的结果【英文标题】:Unable to get desired result from react slick 【发布时间】:2021-02-03 00:15:15 【问题描述】:

我试图实现React slick's 多个项目轮播。期望的结果如下所示 但我希望中心元素弹出一点,就像

但我能做到这一点

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

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-list CSS 来调整幻灯片之间的填充。

  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);

【讨论】:

我已经尝试实现你所说的。 centerPadding 什么都不做。此外,启用 centerMode:true 时,我使用奇数还是偶数滑块都没关系。如问题的第 2 和第 3 张图片所示,出现了半切滑块。 您是在 AchiversDetails 还是滑块上设置宽度?

以上是关于无法从反应光滑中获得所需的结果的主要内容,如果未能解决你的问题,请参考以下文章

无法在官方 MySQL 连接器中获得所需的输出

获得所需的结果集值,该值可能需要数小时才能显示在表格中

使用位图色彩乘法时如何获得所需的颜色?

遇到错误sql_mode = only_full_group_by,所以如何获得所需的结果

在javascript中创建对象数组以获得所需的结果[关闭]

使用朴素贝叶斯模型获得良好结果所需的最少特征数是多少?