Move the slider in react slick carousel on click on next/prev image

Question

I am using centerMode: true and adding a background-color for inactive images. I need is a movement on the click of the previous/next inactive image so that the carousel should move accordingly.

 const settings = {
    dots: false,
    slidesToShow: 1,
    autoplay: false,
    centerMode: true,
    variableWidth: true,
    nextArrow: <NextArrow />,
    prevArrow: <PreviousArrow />,
  };

const NextArrow = ({ onClick }) => (
  <span className="next" onClick={onClick}></span>
);
const PreviousArrow = ({ onClick }) => (
    <span className="prev" onClick={onClick}></span>
);

Currently, the navigation is only on the arrows and not on the previous/next image click.

EDIT - there is native click event binded on the images.

score 0 · Answer 1 · edited Apr 13 '20 at 09:10

0

You could use the following library for the implementation of a carousel in reactjs: library slick

prevArrow

<button type="button" class="slick-prev">Previous</button>

Allows you to select a node or customize the HTML for the "Previous" arrow.

nextArrow

<button type="button" class="slick-next">Next</button>

Allows you to select a node or customize the HTML for the "Next" arrow.

edited Apr 13 '20 at 09:10

Juanes30

2,398
2
24
38

answered Apr 13 '20 at 05:42

Benyamin

11
2

This approach didn't help as the size of the background image may vary therefore i am not able to add an overlay to it via another element. – Hitesh Apr 14 '20 at 06:54
@Hitesh How are you adding an overlay currently? – Daniel Duong Apr 22 '20 at 01:26

score 0 · Answer 2 · answered Apr 23 '20 at 02:03

One approach would be to invoke slickNext or slickPrev when clicking on your images.

You mention an existing click event listener bound to the images, you could add the slick method invocation within that call and use the slide index compared to the active index to know whether to fire slickNext or slickPrev.

https://react-slick.neostack.com/docs/example/previous-next-methods/

Move the slider in react slick carousel on click on next/prev image

2 Answers2