Open Shubh-Rajawat opened 4 months ago
This is my whole settings object ->
var settings = { centerMode: false, variableWidth: false, dots: false, infinite: false, wheel: true, speed: 500, slidesToShow: numSlidesToShow, slidesToScroll: 1, arrows: newsItems?.length > 4 ? true : false, responsive: [ { breakpoint: 1500, settings: { slidesToShow: 3, } }, { breakpoint: 1300, settings: { slidesToShow: 3, } }, { breakpoint: 1024, settings: { slidesToShow: 3, } }, { breakpoint: 840, settings: { slidesToShow: 2.5, slidesToScroll: 1.5, } }, { breakpoint: 730, settings: { slidesToShow: 2.5, slidesToScroll: 1.5, } }, { breakpoint: 580, settings: { slidesToShow: 1.5, slidesToScroll: 1.5 } } ] };
This is my Slider component ->
{ newsItems ? <Slider { ...settings } ref={ sliderRef } className='flex justify-start' > { newsItems?.map( ( item, index ) => { return ( <NewsCard key={ index } data={ item } /> ) } ) } </Slider> : "" }
OUTPUT --
This is my whole settings object ->
This is my Slider component ->
OUTPUT --
Why is the item coming in center when I have set centerMode to false ?????