React Slick Slider slickGoTo - Custom Slider Nav Buttons

Question

I'm new to react and I'm trying to make a custom react slick slider navigator for my sliders.

I've 2 separate sliders that are linked by the asNavFor method and I want my buttons to change the sliders to the index of the button clicked.

I'll leave my code bellow.

import { useState, useRef, useEffect } from 'react';

import '../css/KioskSlides.css';

import frame from '../img/frame.png';

import Slider from 'react-slick';

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

import kioskSlide1  from "../data/kiosk-slider1";

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSun, faCameraRetro, faDownload, faBus, faPeopleLine, faKitMedical } from '@fortawesome/free-solid-svg-icons';

function KioskSlider(){

    const [nav1, setNav1] = useState();
    const [nav2, setNav2] = useState();

    const settings = {
        dots: false,
        fade: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    const settings1 = {
        arrows: false,
        dots: false,
        fade: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    const kiosk1 = kioskSlide1.map(slide => {
        return(
            <>
            <div className='servicos-slide w-full items-center' >
                <div className='w-6/12 px-6 '>
                    <h1 className='text-[#333] text-[28px] font-semibold '>{slide.title}</h1>
                    <p className='text-[#333] text-[22px] '>{slide.text}</p>
                </div>
                
            </div>
            </>
        )
    })
    
    const kioskImg1 = kioskSlide1.map(slide => {
        return(

            <div dangerouslySetInnerHTML={{__html: slide.media }}></div>
        )
    })

    const refSlide1 = (slider1) => setNav1(slider1)
    const refSlide2 = (slider2) => setNav2(slider2)

    
    
    return(
        <>
        <div id="servicos" className='w-full h-[910px] flex items-center '>
            <div className='container mx-auto  items-center'>
                <div className='w-full'>
                    <h2 className='text-[#333] text-[44px] font-bold pl-9 mb-8'>Todos os serviços<br></br> num só portal</h2>
                    <Slider {...settings} className='w-full pl-3' asNavFor={nav2} ref={refSlide1} >
                        {kiosk1}
                    </Slider>
                    <div className='w-6/12 px-10 mt-12 '>
                        <button className='w-[165px] h-[45px] p-2 mr-2 mb-8 text-white bg-[#D6004C] active:text-[#D6004C] active:bg-white active:border-2 active:border-[#D6004C] hover:text-[#D6004C] hover:bg-white hover:border-2 hover:border-[#D6004C] text-lg text-center font-medium rounded-3xl inline-block'  > <FontAwesomeIcon icon={faSun} /> Meteorologia</button>
                        <button className='w-[165px] h-[45px] p-2 mr-2 mb-8 text-white bg-[#D6004C] active:text-[#D6004C] active:bg-white active:border-2 active:border-[#D6004C] hover:text-[#D6004C] hover:bg-white hover:border-2 hover:border-[#D6004C] text-lg text-center font-medium rounded-3xl inline-block' onClick={/* go to slide number 2*/ } > <FontAwesomeIcon icon={faCameraRetro}/> Galeria</button>
                        <button className='w-[165px] h-[45px] p-2 mr-2 mb-8 text-white bg-[#D6004C] active:text-[#D6004C] active:bg-white active:border-2 active:border-[#D6004C] hover:text-[#D6004C] hover:bg-white hover:border-2 hover:border-[#D6004C] text-lg text-center font-medium rounded-3xl inline-block'  > <FontAwesomeIcon icon={faDownload}/> Downloads</button>
                        <button className='w-[165px] h-[45px] p-2 mr-2 mb-8 text-white bg-[#D6004C] active:text-[#D6004C] active:bg-white active:border-2 active:border-[#D6004C] hover:text-[#D6004C] hover:bg-white hover:border-2 hover:border-[#D6004C] text-lg text-center font-medium rounded-3xl inline-block'  > <FontAwesomeIcon icon={faBus}/> Transportes</button>
                        <button className='w-[165px] h-[45px] p-2 mr-2 mb-8 text-white bg-[#D6004C] active:text-[#D6004C] active:bg-white active:border-2 active:border-[#D6004C] hover:text-[#D6004C] hover:bg-white hover:border-2 hover:border-[#D6004C] text-lg text-center font-medium rounded-3xl inline-block'  > <FontAwesomeIcon icon={faPeopleLine}/> Filas</button>
                        <button className='w-[165px] h-[45px] p-2 mr-2 mb-8 text-white bg-[#D6004C] active:text-[#D6004C] active:bg-white active:border-2 active:border-[#D6004C] hover:text-[#D6004C] hover:bg-white hover:border-2 hover:border-[#D6004C] text-lg text-center font-medium rounded-3xl inline-block'  > <FontAwesomeIcon icon={faKitMedical}/> Farmácias</button>
                    </div>
                    <img src={frame} alt="" className='w-[348px] h-auto z-40 absolute top-[88%] right-[20%] '/>
                    
                    <Slider {...settings1} className="imgSlider w-[237px] h-[421px] right-[22.9%] top-[98.5%] " asNavFor={nav1} ref={refSlide2} >
                        {kioskImg1}
                    </Slider>

                </div>
            </div>
        </div>
        
        </>
    )
}

export default KioskSlider;

How should I target both sliders in order to change their index on each button click?

Print for better explanation. enter image description here

Thanks in advance for the help.

So you want custom slider next and previous buttons with event right? — Priyen Mehta, Nov 07 '22 at 12:36
@PriyenMehta what i need is a way to add a onClick event on each button that changes the sliders index, ex. button 2 is clicked, both sliders go to 2 slide. i've added a print of what it looks like right now — Ricardo Carneiro, Nov 07 '22 at 14:57
okay, I will help you to backward and forward event by index than you can implement in your code as per your requirement. — Priyen Mehta, Nov 08 '22 at 08:28

score 0 · Answer 1 · answered Nov 08 '22 at 08:34

First you have to pass your event like this and NextArrowWrapper and PrevArrowWrapper are just icons.

const settings = {
 ...styles[deviceType],
 infinite: true,
 slidesToScroll: 1,
 initialSlide: 0,
 autoplay: true,
 autoplaySpeed: 3000,
 nextArrow: <NextArrowWrapper onNextClick={onNextClick} />,
 prevArrow: <PrevArrowWrapper onPreviousClick={onPreviousClick} />,
 dotsClass: classNames('slick-dots', theme),
};

Two events: You have to use slider ref current object for prev and next event, Like this.

const onPreviousClick = () => {
 sliderRef.current.slickPrev();
};

const onNextClick = () => {
 sliderRef.current.slickNext();
};

Pass your ref in slider like this:

<Slider ref={sliderRef} {...settings}>

Thanks, I hope it will help you :).

React Slick Slider slickGoTo - Custom Slider Nav Buttons

1 Answers1