My setting:
const settings= {
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
dotsClass: "slick-dots mb-9"
};
You can use initialSlide:1 in your settings object
you can check more here on API's doc by React Slick
https://react-slick.neostack.com/docs/api#initialSlide
Related
my React website from right to left
<html lang="ar" dir="rtl">
and I have react-slide to show 1 image every slide
const settings = {
dots: true,
infinite: true,
autoplaySpeed:1500,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
initialSlide: 0,
fade: true,
rtl: true
};
my problem is fade effect not show any image !!!!
Assuming there are no problems in the html or css code, try either of the following cssEase options.
cssEase: 'linear',
cssEase: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
Beginner question! As the question say How to solve this Prop spreading is forbidden Eslint warning.
Reading the Eslint doc on this warning do I really have to do like this:
const {dots, arrows, autoplay...........} = props;
For all props or is there an easier way?
render() {
const { afterChanged } = this.props;
const { beforeChanged } = this.props;
const settings = {
dots: false,
arrows: false,
autoplay: false,
infinite: true,
lazyLoad: false,
swipeToSlide: true,
centerMode: false,
focusOnSelect: false,
className: 'center',
slidesToShow: 4,
afterChange: afterChanged,
beforeChange: beforeChanged,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
return (
<div>
<Slider ref={slider => (this.slider = slider)} {...settings}>
{this.sliders()}
</Slider>
</div>
);
}
Eslint just enforces a style you can define yourself. In this case you have to make the decision, whether you want to allow prop spreading in your codebase or not.
-> If you allow it, you should just disable the react/jsx-props-no-spreading rule in your eslint config.
-> If you don't allow it, you have to explicitly destructure every property. This is the whole point of that eslint rule. It is made to force you to explicitly name these props, to avoid passing unwanted props down the component tree.
I'm using react-slick. I want to show four items at a time. I'm showing data dynamically.
If I have single item in carousel, it's repeating to fill the place of four items.
This is my code:
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
};
<Slider {...settings}>
//mapping data
</Slider>
Thank you
It repeats to fill all the 4 places since infinite is provided as true. So it try to find four items, but ends up finding the same item again and again. To get your desired behaviour(that is it scrolls infinitely in both directions), i suggest you set the slidesToShow dynamically.
Assuming you have your mapping data in list, you can set the number of slidesToShow dynamically.
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: list.length > 4 ? 4 : list.length,
slidesToScroll: 1,
};
<Slider {...settings}>
//mapping data
</Slider>
infinte : items.length >3;
let settings = {
slidesToShow: 3,
arrows: false,
infinite: megaProjects.length > 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 8000,
lazyLoad: true,
}
I am using React-Slick component in my project. I have to show pagination dots on all the slides except the last slide. I want to hide those pagination dots for last slide.
I have checked that afterChange function is available as a callback. This can be used to customise the slider css in jQuery, but how can I use this function to hide the pagination dots in React application?
import Slider from 'react-slick';
export default class Carousal extends Component {
render() {
let settings = {
accessibility: true,
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: function (currentSlide) {
console.log(currentSlide);
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}
On Components construction set state value for dots prop for the Slider component. Then set it to false when you don't want to show it.
export default class Carousal extends Component {
constructor(props) {
super(props);
this.state = {
dots: true
};
}
render() {
let settings = {
accessibility: true,
dots: this.state.dots,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10px',
responsive: [{
breakpoint: 768,
settings: {
swipeToSlide: true
}
}],
afterChange: (currentSlide) => {
console.log(currentSlide);
this.setState({
dots: (currentSlide !== 'yourDesiredSlide')
});
}
};
return (
<Slider {...settings} >
{slides}
</Slider>
);
}
I'm using React-Slick slider component for React JS, but I'm getting a warning that each array has to have an unique key.
I have an array inside of settings for the slider component. Settings are :
const settings = {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
responsive: [
{breakpoint: 310, settings: {slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 468, settings: {slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 750, settings: {slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 800, settings: {slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 1200, settings: {slidesToShow: 3, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 1800, settings: {slidesToShow: 4, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 2600, settings: {slidesToShow: 5, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
{breakpoint: 100000, settings: 'unslick'}
]
};
And the slider component where I use those settings is :
<Slider {...settings}>
{this.cars()}
</Slider>
How can I map through those settings to give them an key?
I think this is what you might need:
...
render(){
var Cars = settings.responsive.map.function(car, index){
return(<div key={index}>YOUR CONTENT</div>);
}
return(
<Slider {...settings}>
{Cars}
</Slider>
)
}
I want to add that the second parameter of the map function can be used as a unique index which suits the reacts requested key attribute perfectly
Dirty solution:
...
render(){
var counter = 0;
var Cars = settings.responsive.map.function(car, index){
counter++;
return(<div key={counter}>YOUR CONTENT</div>);
}
return(
<Slider {...settings}>
{Cars}
</Slider>
)
}
For diff-algorithm to work correctly while comparing Virtual DOM, react needs all the list items to have unique keys so that it can identify and differentiate every component uniquely. The solution to this is to pass the index of the list as key as explained by #noa-dev above:
render(){
var Cars = this.cars().map(car, index){
return(<div key={index}>{car}</div>);
}
<Slider {...settings}>
{Cars}
</Slider>
}