@Zbiten

Как реализовать переключение изображений (слайдер) по клику?

У меня есть массив изображений:

[
    'https://picsum.photos/500/300?image=0',
    'https://picsum.photos/500/300?image=44',
    'https://picsum.photos/500/300?image=22'
];


По клику на кнопку next, я хочу увеличить текущий индекс на +1, тем самым изменив текущую картинку.
Как это сделать? Или же для этого стоит использовать state?

import React, { Component } from 'react';

class Slider extends Component {

    render() {
        
        let currentSlideImage = 0;

        return (
            <div className="container">
                <button onClick={this.handlePrevButton}>Prev</button>
                <img src={this.props.slides[currentSlideImage]} alt="slider-item"/>
                <button onClick={this.handleNextButton}>Next</button>
            </div>
        );
    }

    handlePrevButton = () => {
        console.log('prev')
    }

    handleNextButton = () => {
        currentSlideImage++;
    }
}

export default Slider;
  • Вопрос задан
  • 124 просмотра
Решения вопроса 1
вы прям задались целью написать сами слайдер или просто не нашли нормальный готовый?
Ответ на ваш вопрос без разници где вы буду хранить currentSlideImage в стэйте или в сторе (если вы используете редукс). Но если вы будете использовать стейт переключение будет реализовать быстрее и думаю в этом моменте правильнее если конечно вам не важно при повторном переходе на страницу с данным слайдером показывать последний слайд на котором остановился пользователь.
import React, { Component } from 'react';

class Slider extends Component {
constructor(props){
super()
this.state=({
currentSlideImage : 0
})
}

handlePrevButton(){
        let currentSlideImage = this.state.currentSlideImage;
this.setState({
currentSlideImage:currentSlideImage-1
})
    }

    handleNextButton(){
       let currentSlideImage = this.state.currentSlideImage;
    this.setState({
    currentSlideImage:currentSlideImage+1
    })
    }

    render() {
        return (
            <div className="container">
                <button onClick={()=>this.handlePrevButton()}>Prev</button>
                <img src={this.props.slides[this.state.currentSlideImage]} alt="slider-item"/>
                <button onClick={()=>this.handleNextButton()}>Next</button>
            </div>
        );
    }
}

export default Slider;


В данном коде не хватает проверки при клике на next возможно ситуация когда количество фоток 3 а пользователь накликал 4 произойдет ошибка. Тоже самое с prev кнопкой.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Quasar Software Москва
от 120 000 до 170 000 руб.
TOCTEAM Казань
от 70 000 до 150 000 руб.
Spotware Systems Лимассол
от 3 500 до 3 800 eur.