Галереи и слайдеры

MDX (Markdown + JSX) позволяет интегрировать компоненты React прямо в Markdown-документы, что делает его мощным инструментом для создания интерактивных элементов, таких как галереи изображений и слайдеры. Основная идея заключается в том, что разметка документа остаётся читабельной в Markdown, а динамические элементы реализуются через JSX-компоненты.

Импорт и использование компонентов

Для организации галереи или слайдера необходимо сначала создать или импортировать соответствующий React-компонент. Например:

import ImageGallery from './components/ImageGallery';
import Slider from './components/Slider';

После этого компоненты можно использовать прямо в MDX-документе:

Ключевой момент — передача данных через пропсы. В случае галереи это обычно массив объектов с полями src, alt, caption. Для слайдера часто используются поля title, description, image.

Структура данных для галерей

Правильная организация данных позволяет легко расширять функциональность. Пример структуры для галереи:

const imagesArray = [
  { src: '/images/photo1.jpg', alt: 'Описание фото 1', caption: 'Фото 1' },
  { src: '/images/photo2.jpg', alt: 'Описание фото 2', caption: 'Фото 2' },
  { src: '/images/photo3.jpg', alt: 'Описание фото 3', caption: 'Фото 3' }
];

Такой подход позволяет компонента автоматически рендерить изображения, подписи и, при необходимости, реализовывать эффекты наведения или модальные окна.

Создание слайдера с анимацией

Слайдеры в MDX реализуются через компоненты React с поддержкой состояния и эффектов. Основные возможности включают:

  • Автоматическое пролистывание: использование setInterval или хука useEffect.
  • Ручное переключение: кнопки «вперед»/«назад» с изменением состояния текущего слайда.
  • Адаптивный дизайн: использование CSS Flexbox/Grid и медиазапросов.

Пример минимального слайдера:

import { useState, useEffect } from 'react';

export default function Slider({ slides, autoPlay = false, interval = 3000 }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (!autoPlay) return;
    const timer = setInterval(() => {
      setCurrentIndex(prev => (prev + 1) % slides.length);
    }, interval);
    return () => clearInterval(timer);
  }, [autoPlay, interval, slides.length]);

  const nextSlide = () => setCurrentIndex((currentIndex + 1) % slides.length);
  const prevSlide = () => setCurrentIndex((currentIndex - 1 + slides.length) % slides.length);

  return (
    

      
      

        {slides[currentIndex].title}
        
{slides[currentIndex].title}

      

      
    

  );
}

Стилизация и интеграция с MDX

MDX позволяет использовать как глобальные CSS-файлы, так и CSS-in-JS решения. Для слайдеров и галерей часто применяются следующие приёмы:

  • Flexbox для горизонтального расположения слайдов.
  • Grid для галерей с равномерным распределением изображений.
  • Псевдоклассы :hover и :focus для эффектов при наведении.
  • Медиа-запросы для адаптации под мобильные устройства.

Пример CSS для галереи:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

Динамическая генерация галерей

MDX позволяет подключать данные из внешних источников или JSON-файлов:

import images from './data/images.json';

Такой подход упрощает обновление содержимого без изменения кода компонента. Для больших проектов это критически важно, поскольку позволяет отделить контент от презентации.

Поддержка модальных окон

Для расширенной функциональности галерей часто используется модальное окно для увеличения изображений. Пример интеграции с модальным компонентом:

import Modal from './Modal';

function ImageGallery({ images }) {
  const [selected, setSelected] = useState(null);

  return (
    <>
      

        {images.map((img, index) => (
          {img.alt} setSelected(img)} />
        ))}
      

      {selected &&  setSelected(null)} content={{selected.alt}} />}
    
  );
}

Это позволяет реализовать полноценную интерактивную галерею с увеличением изображения и поддержкой навигации внутри модального окна.

Интеграция с анимационными библиотеками

MDX поддерживает любые сторонние React-библиотеки. Для слайдеров и галерей часто используются:

  • framer-motion для плавных анимаций слайдов.
  • react-spring для динамических эффектов.
  • swiper для готовых слайдеров с множеством функций.

Использование этих библиотек повышает интерактивность и визуальную привлекательность интерфейса.

Оглавление