2

I'm trying to integrate the react-slick dots with custom arrows from material UI icons, but both of them don't seem to integrate in a straight line with dots in middle, and arrows on left and right of the end dots. Since the number of images may vary, adding left & right margins doesn't seem to be an option. Can anyone help me with that?

[Edit] - Adding code

<Modal>
<Slider {...settings}>
{arr.map((x)=>{
<>
<div>
<img src="x.url"/>
</div>
<div>
{x.des}
</div>
</>
})}
</Slider>
<button className="button-left" onClick={()=>{goToPrev}}>left</button>
<button className="button-right" onClick={()=>{goToNext}}Right</button></Modal>
Min Yoongi
  • 396
  • 5
  • 16
  • Could you please add a minimal-running sample of what you've tried? – Moaaz Bhnas Oct 21 '21 at 18:06
  • @MoaazBhnas I've added the code now, please check – Min Yoongi Oct 21 '21 at 18:48
  • Just to make sure I understand what you need, you want the normal layout of the slider like this SimpleSlider example: https://react-slick.neostack.com/docs/example/simple-slider. Only with custom arrows? Or do you want to position them in a specifc way? – Moaaz Bhnas Oct 21 '21 at 18:57
  • As there's an example with custom arrows where you can add any component you want instead of the default ones and position the way you want with css. – Moaaz Bhnas Oct 21 '21 at 18:59
  • Yes I want to implement simple slider like the link you've mentioned @MoaazBhnas , just that before first dot and after last dot there should be previous and next arrows too with intended functionality and I'm not able to apply CSS properly. – Min Yoongi Oct 21 '21 at 19:07
  • I see. Unfortunately it's not possible to position the arrows relative to the dots, as they are siblings by design (even custom arrows). – Moaaz Bhnas Oct 21 '21 at 20:15
  • 1
    However, If I had to do this, I would disable both arrows and dots, create a new separate element container where I add my custom arrows and dots, position them the way I want, and then position this container at the bottom of the slider. Functionalities can be added via the methods from the API. `slickNext`, `slickPrev` for buttons, and `slickGoTo` for the dots. – Moaaz Bhnas Oct 21 '21 at 20:20
  • 1
    Thanks @MoaazBhnas for the API methods, I am able to implement the same with slickGoTo. You can post your answer, will mark it as accepted rather than in comment. – Min Yoongi Oct 23 '21 at 12:01

0 Answers0