CODEWITHSUNDEEP
javascriptreactjsreact-slick
Hitesh
Hitesh

Reputation: 167

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

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.

enter image description here

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

Upvotes: 0

Views: 5107

Answers (2)

J Dubuis
J Dubuis

Reputation: 492

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/

Upvotes: 0

Benyamin
Benyamin

Reputation: 11

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.

Upvotes: 0

Related Questions