How to Set arrow controls to a custom button

Question

I added the react-slick into my project to show a carousel. I want to control my slider with custom next and prev button which is in the top of the slider contents. so I followed the custom arrow documentation, but I don't want to show my buttons inside the slick contents, I want to give the controls to the button above the slider contents. How to achieve this? I Included my code from the component I created.

import React from 'react';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

function SampleNextArrow(props) {
  const { onClick } = props;
  return (
    <React.Fragment>
      <Button
        onClick={onClick} className="slickRight">
        Next
      </Button>
    </React.Fragment>
  );
}
function SamplePrevArrow(props) {
  const { onClick } = props;
  return (
    <React.Fragment>
      <Button
        onClick={onClick} className="slickLeft">
        Prev
      </Button>
    </React.Fragment>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    var settings = {
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
    };
    return (
      <div>
        {/*Want to Add Control to this Buttons*/
        <Button>Prev</Button>
        <Button>Next</Button>
        
        <div className="container">
          <Slider {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
          </Slider>
        </div>
      </div>
    );
  }
}

export default App;

score 4 · Answer 1 · answered Jun 07 '21 at 02:28

Here you can achieve this by using react useRef Hook here is the actual code:

import React, { useRef } from "react";
import Slider from "react-slick";
 
const SliderComponent = () => {
 const slider = useRef();
  
  const next = () => {
   slider.current.slickNext();
 };
  const previous = () => {
   slider.current.slickPrev();
 }; 
  
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplaySpeed: 3000,
    arrows: false,
  
  responsive: [
   {
    breakpoint: 1024,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 2,
      infinite: true,
      dots: true,
    },
  },
  {
    breakpoint: 768,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
    },
  },
 ],
};
  return(
     <div>
       <button  onClick={previous}> Prev Button </button>
        <Slider ref={(c) => (slider.current = c)} {...settings}>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
        </Slider>
      <button onClick={next}> Next Button </button>
   </div>            
   )}

score 0 · Accepted Answer · answered Jul 13 '19 at 10:42

0

Nandhini, You must need to read the documentation fully once before using the package.

There is already a method for this in official document https://react-slick.neostack.com/docs/example/previous-next-methods

Use it.

answered Jul 13 '19 at 10:42

Arjun Pandi

266
2
12

How to Set arrow controls to a custom button

2 Answers2