Лабораторная работа №7: Слайдер отзывов на React

Цель работы

Реализовать слайдер отзывов с возможностью переключения между отзывами с помощью стрелок.

Теоретическая часть

Слайдер отзывов — это интерактивный элемент интерфейса, который позволяет отображать несколько отзывов в ограниченном пространстве. Основные понятия:

Состояние слайдера — текущий индекс отображаемого отзыва
Обработчики переключения — функции для перехода к следующему или предыдущему отзыву
Циклическое переключение — возможность возвращаться к первому отзыву после последнего и наоборот

В этой лабораторной работе мы создадим простой слайдер отзывов с использованием хука useState для управления состоянием.

Для создания слайдера нам понадобятся:

Массив с данными отзывов
Переменная состояния для текущего индекса
Функции для переключения между отзывами
Отображение текущего отзыва

Задание

Создать слайдер с 3 отзывами, переключаемый стрелками "Влево" и "Вправо". При достижении конца списка слайдер должен продолжать работу циклически.

Пошаговая инструкция

Создайте компонент слайдера

В папке src/components создайте файл TestimonialSlider.js.

# В терминале
touch src/components/TestimonialSlider.js

Напишите базовую структуру компонента

Откройте файл TestimonialSlider.js и добавьте следующий код:

import React, { useState } from 'react';

function TestimonialSlider() {
  // Здесь будет код слайдера
  
  return (
    
      {/* Здесь будет отображаться текущий отзыв */}
    
  );
}

export default TestimonialSlider;

Добавьте массив отзывов

Добавьте массив с отзывами внутри компонента:

const testimonials = [
  {
    id: 1,
    text: "Отличные преподаватели! За 3 месяца улучшила свой английский до уровня Upper-Intermediate.",
    author: "Анна, студентка"
  },
  {
    id: 2,
    text: "Удобное расписание и гибкая система оплаты. Рекомендую эту школу всем!",
    author: "Мария, бизнес-аналитик"
  },
  {
    id: 3,
    text: "Носители языка, квалифицированные педагоги и индивидуальный подход к каждому ученику.",
    author: "Дмитрий, инженер"
  }
];

Добавьте состояние для текущего индекса

Используйте хук useState для управления текущим индексом отзыва:

const [currentIndex, setCurrentIndex] = useState(0);

Создайте функции для переключения отзывов

Добавьте функции для перехода к следующему и предыдущему отзыву:

const goToPrevious = () => {
  const isFirstSlide = currentIndex === 0;
  const newIndex = isFirstSlide ? testimonials.length - 1 : currentIndex - 1;
  setCurrentIndex(newIndex);
};

const goToNext = () => {
  const isLastSlide = currentIndex === testimonials.length - 1;
  const newIndex = isLastSlide ? 0 : currentIndex + 1;
  setCurrentIndex(newIndex);
};

Отобразите текущий отзыв

Измените JSX для отображения текущего отзыва и кнопок переключения:

return (

{testimonials[currentIndex].text}

{testimonials[currentIndex].author}

);

Добавьте компонент на главную страницу

Откройте файл src/pages/Home.js и импортируйте компонент слайдера:

import TestimonialSlider from '../components/TestimonialSlider';

Затем добавьте компонент в JSX, заменив статический блок отзывов:

Отзывы учеников

Проверьте результат

Запустите проект (если еще не запущен):

npm start

Откройте браузер и убедитесь, что слайдер отзывов отображается на главной странице и работает корректно.

Если при нажатии на стрелки отзывы меняются, и при достижении конца списка происходит циклический переход к первому отзыву, значит, слайдер реализован верно.

Критерий	Баллы
Работающий слайдер	4
Использован `useState`	2
Циклическое переключение	2
Без ошибок	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать программный код на стороне клиента в соответствии с техническим заданием

На демонстрационном экзамене вам потребуется реализовать интерактивные элементы интерфейса, такие как слайдер отзывов, что является частью клиентской логики веб-приложения.

Согласно документу КОД 09.02.09-1-2025, на экзамене оценивается:

Навык разработки клиентской части веб-приложения в соответствии с техническим заданием
Умение применять выбранные языки программирования для написания программного кода

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Отзывы учеников

Критерии оценки

Связь с демонстрационным экзаменом