Thanks Chris, i have a little question, how can i edit the styles of the arrows based on the length of the Slider, i mean, if the slider is in the end desactivate the right arrow, again, thanks!
I'm not 100% sure how I'd implement it with this library, but I imagine that if you're using custom arrows then you can access the index of the current slide as well as the total length of your image array. If you can pass that info to your buttons through props. For the left arrow you could set the button to disabled when the index is 0. For the right arrow you could set disabled when the index equals the length of the array - 1.
anyone know if there's a way with slick slider to make it so rather than images appearing out of nowhere, the left image animates to the right images place, 2nd (main) image minimises to the 1st images place, and 3rd image enlarges to the 2nd (main) images place?
You've got lots of options for customizing the slider. You can set arrows to false and play around with some of the other settings. Check out the API here: react-slick.neostack.com/docs/api
Thanks! The spread operator allows you to pass in the entire settings object as props to the slider component. Otherwise, you'd need to pass them all in individually so it'd be something like
Hey Chris, amazing tutorial bud, could we get another tutorial on how to make this responsive? like 2 images on medium width screens and 1 on smaller ones? Would be great to see that on the channel ✌
@@ChrisDeSilva Thanks man, really appreciate your prompt response. Would love to be a part of your findings. We can customise the number of slides by using a responsive property in the settings, eg. 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 } } ] Lots of love and appreciation for you 😃
Awesome vid. Quick question, you know the {onClick} prop that goes into each arrow component, does that run a function that is under the hood as part of the Slider component?
That's the idea, yeah. You spread in the settings object with your custom arrows with their click handlers. From there, the Slider component has access to them. If you really want to get into the weeds I'd recommend checking out the source code: github.com/akiran/react-slick/blob/master/src/slider.js
Check this section of the docs out for swiping: react-slick.neostack.com/docs/example/swipe-to-slide. As for the key down event, you can do the same thing as the onclick but check the e.key to see if it matches the arrow you're pressing: developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
Definitely. You'll just want to play around a bit with the styles to make sure everything fits. You can also adjust the slidesToShow and slidesToScroll values.
You've got a couple of options depending on what exactly you want to do. You'll want to use media queries and then move things around as you see fit. You can make all three images smaller, reposition the arrows, leave the left and right images off the screen entirely and only show the center image as it slides in. Lots of different things you can do, but you're right, the code as it's written is optimized for desktop and would need to be adjusted based on your needs in order for it to look nice on smaller screens.
As a self taught dev, I thank you for the in-depth explanation. You have a new subscriber, thank you so much!
He maid three hours of annoying research through documentation look simple. And now it is, Yes!
EXACTLY what I was looking for 👍🏻👍🏻👍🏻 great video. Thanks
Thank you are a live saver! Best tutorial ❤️
Thank you for the tutorial :)
I'd like to recommend another React carousel to you, it's called "bear-react-carousel". You might want to give it a try.
Thank's man, very good tutorial, save a workproject mine
Thanks Chris, i have a little question, how can i edit the styles of the arrows based on the length of the Slider, i mean, if the slider is in the end desactivate the right arrow, again, thanks!
I'm not 100% sure how I'd implement it with this library, but I imagine that if you're using custom arrows then you can access the index of the current slide as well as the total length of your image array. If you can pass that info to your buttons through props. For the left arrow you could set the button to disabled when the index is 0. For the right arrow you could set disabled when the index equals the length of the array - 1.
hi, I get an error when I import slick css, I installed it tho
Thank you so much 💝
anyone know if there's a way with slick slider to make it so rather than images appearing out of nowhere, the left image animates to the right images place, 2nd (main) image minimises to the 1st images place, and 3rd image enlarges to the 2nd (main) images place?
even i have same problem if u got any solution please share with me too
Thank you! This was very useful : D
thank you so much for sharing
Thank you!
Thank you for your help
Great tutorial, thanks
Thankyou so much man!
nice also using the cyberpunk theme
Wonderful... Is that slide works without the arrow buttons..
Like, scrolling horizontally over the carrousal? With Having the same effect
You've got lots of options for customizing the slider. You can set arrows to false and play around with some of the other settings. Check out the API here: react-slick.neostack.com/docs/api
Hey, nice tutorial! Can you explain why the spread operator is used in ? I have a hard time grasping when it should be used
Thanks! The spread operator allows you to pass in the entire settings object as props to the slider component. Otherwise, you'd need to pass them all in individually so it'd be something like
Thank you! Eres el mejor!!!
Hey Chris, amazing tutorial bud, could we get another tutorial on how to make this responsive? like 2 images on medium width screens and 1 on smaller ones? Would be great to see that on the channel ✌
Check the channel in a week or two and I'll get something put together
@@ChrisDeSilva Thanks man, really appreciate your prompt response. Would love to be a part of your findings. We can customise the number of slides by using a responsive property in the settings, eg.
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
}
}
]
Lots of love and appreciation for you 😃
@@Peace8D Ended up doing it a little differently, but here's the link to the follow-up video: ruclips.net/video/a9YxAlJMgAI/видео.html
Awesome vid. Quick question, you know the {onClick} prop that goes into each arrow component, does that run a function that is under the hood as part of the Slider component?
That's the idea, yeah. You spread in the settings object with your custom arrows with their click handlers. From there, the Slider component has access to them. If you really want to get into the weeds I'd recommend checking out the source code: github.com/akiran/react-slick/blob/master/src/slider.js
@@ChrisDeSilva oh awesome! Thanks so much for your reply! Seriously great video, you have helped me out a lot! 🤘🤘
This is a great video, but is there anyway to get it to work with onKeyDown using the right and left arrow on desktop or a swipe on mobile?
Check this section of the docs out for swiping: react-slick.neostack.com/docs/example/swipe-to-slide. As for the key down event, you can do the same thing as the onclick but check the e.key to see if it matches the arrow you're pressing: developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
@@ChrisDeSilva Thanks so much!
Can the slides author play without clicking ?
You should be able to set autoplay to true. Here's a link to the docs: react-slick.neostack.com/docs/api
@Chris DeSilva can u do it 5 images ... like the active slide is bigger and back slides in decreasing order of size
Definitely. You'll just want to play around a bit with the styles to make sure everything fits. You can also adjust the slidesToShow and slidesToScroll values.
are you sure we can use other icons? my antd arrows are not showing
If slidesToShow is greater than or equal to the total number of images in your array, the arrows won't show up
@@ChrisDeSilva thanks that was it haha, silly me XD
THANKS A LOT!!!!!!!
Weirdly the arrows did not style on my practice
Make sure the number of images in your array is greater than the number for slidesToShow, otherwise the arrows won't show up
one doubt what about making it responsive
You've got a couple of options depending on what exactly you want to do. You'll want to use media queries and then move things around as you see fit. You can make all three images smaller, reposition the arrows, leave the left and right images off the screen entirely and only show the center image as it slides in. Lots of different things you can do, but you're right, the code as it's written is optimized for desktop and would need to be adjusted based on your needs in order for it to look nice on smaller screens.
@@ChrisDeSilva I used one of those props variableWidth(boolean). I set it to true and it worked wonders
Awesome! Thanks for sharing that
@Ishaan Wadhwa (Intern) oh yess, you could just add a property variableWidth: true to the options
can we show 5 slides? "slidesToShow: 5"??
As long as you've got at least 5 images
thnks a lot for this helpful video
Thank you!