parthasarathy B

parthasarathy B

  • NA
  • 927
  • 100.8k

Height issue in React Slick Slider

Jun 1 2021 11:53 AM
Hi all,
I am using React slick slider in my spfx react webpart. how to fix this below issue, i want to have same height for all the slides.
  1. .HomeSlides {  
  2. background-color#5c2e91;  
  3. color#fff;  
  4. text-aligncenter;  
  5. //padding10px;  
  6. heightauto !important;  
  7. min-height100px;  
  8. padding5px;  
  9. //max-height300px;  
  10. //width:300px;  
  11. width95%;  
  12. floatleft;  
  13. //border-spacing10px;  
  14. //displaytable-cell;  
  15. //border10px solid #fff;  
  16. border-radius: 10px;  
  17. white-spacenormal;  
  18. //box-sizing: border-box;  
  19. //margin6px;  
  20. // height: inherit !important;  
  21. //display: flex !important;  
  22. // justify-contentcenter;  
  23. align-items: stretch;  
  24. }  
  1. const renderSlides = () =>  
  2. this.state.Slides.map(item => (  
  3. <>  
  4. <div className={styles.HomeSlides} tabIndex={0} onClick={() => { this.openLink(item.LinkURL ? item.LinkURL : ""); }} style={{ background: this.props.TileColor }}>  
  5. {/* <div> */}  
  6. <p style={{ color: this.props.TitleFontColor != undefined ? this.props.TitleFontColor : "#fff" }}><h3>{item.Title}</h3></p>  
  7. <p style={{ color: this.props.DescriptionFontColor != undefined ? this.props.DescriptionFontColor : "#fff" }}>{item.Description}</p>  
  8. {/* </div> */}  
  9. </div>  
  10. </>  
  11. ));  
 
  1. return (  
  2. <div>  
  3. <Slider  
  4. {...settings}  
  5. >  
  6. {renderSlides()}  
  7. </Slider>  
  8. </div>  
  9. );  

Answers (5)