Hi all,
I am using react slick slider, if i add it in a SP Modern page full section(3 slides) it works perfectly.but if i placed it in the One-third right sections. The same 3 slides appeared with conjusted width even in al sections but i want it to reduce into 2 or 1 slides as per the placed section width.
What should i do to reduce the slides when it is placed on diferrent sized zones.
I have placed code below.
export default class ReactSlickSlider extends React.Component<IReactSlickSliderProps, {}> { public render(): React.ReactElement<IReactSlickSliderProps> { var settings = { dots: true, infinite: false, speed: 500, slidesToShow: 4, slidesToScroll: 4, initialSlide: 0, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }; return ( <div> <h2> Responsive </h2> <Slider {...settings}> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> <div className={styles.card}> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> </div> </Slider> </div> ); } }
Thanks in advance!