{"draftJsState":{"blocks":[{"data":{"image":{"id":"635c418d8a7b1711527037b1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"58ko6"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"bpufo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данной статье мы разберем задание, которое может встретиться в рамках собеседования на должность фронтенд-разработчика, а именно реализацию слайдера изображений.","type":"unstyled","key":"cpbum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"За последние 5 месяцев на моем счету 15 очных собеседований и предложения от Google, Roku, Microsoft и других компаний.","type":"unstyled","key":"2q7r8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Суть задачи — реализовать виджет за 45–50 минут и рассказать о вариантах оптимизации. Ее решением мы займемся в данном руководстве. Главная цель не в том, чтобы реализовать слайдер изображений со множеством функциональностей, а в том, чтобы объяснить, как именно его реализовать и оптимизировать.","type":"unstyled","key":"7klsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Требования","type":"header-three","key":"kao8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виджет должен:","type":"unstyled","key":"3gpu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"показывать изображения кошек из API с ограничением размеров;","type":"unordered-list-item","key":"brgij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"отображать описание или название каждого изображения;","type":"unordered-list-item","key":"db4lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"обеспечивать перемещение между изображениями с помощью стрелок;","type":"unordered-list-item","key":"1mnoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"допускать смену слайда при касании на мобильных устройствах;","type":"unordered-list-item","key":"73kg1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"осуществлять переход на любой слайд;","type":"unordered-list-item","key":"cmv8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"включать автоматическую смену слайдов (Autoplay);","type":"unordered-list-item","key":"1mja9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"предоставлять возможность настройки ширины и высоты слайдера;","type":"unordered-list-item","key":"5knjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"гарантировать отзывчивость слайдера;","type":"unordered-list-item","key":"1qe92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"обеспечивать эффективную загрузку и быстрое отображение изображений слайдера.","type":"unordered-list-item","key":"d76bd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Макет","type":"header-three","key":"6qdev"},{"data":{"image":{"id":"635c41a4c70c326c3fdfd458"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Макет слайдера","type":"atomic:image","key":"eelte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг в браузере","type":"header-three","key":"8ofga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В первой и простой реализации мы выполняем рендеринг всех слайдов в браузере и отображаем только части в области просмотра (англ. viewport) или в элементе слайдера (когда задаем ширину или высоту). Эти решения загружают все изображения для всех слайдов и имеют N элементов DOM, где N — количество слайдов.","type":"unstyled","key":"ft0r7"},{"data":{"image":{"id":"635c41a4f8f3a1185fee0459"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг в браузере","type":"atomic:image","key":"9c9d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Архитектура компонентов","type":"header-three","key":"7lfh0"},{"data":{"image":{"id":"635c41a43c83355c0389ff09"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Архитектура компонентов слайдера","type":"atomic:image","key":"69i3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация компонентов","type":"header-three","key":"7l180"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнем с пропсов (англ. props) компонента слайдера, с помощью которых мы настраиваем слайдер:","type":"unstyled","key":"73ovk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{ \nautoPlay: boolean, \nautoPlayTime: number, \nwidth: '%' | 'px', \nheight: '%' | 'px',\n}","type":"blockquote","key":"dr21l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В компоненте слайдера реализуем:","type":"unstyled","key":"5tdc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"загрузку изображений;","type":"unordered-list-item","key":"9mg36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"метод для навигации по стрелкам (англ. arrows);","type":"unordered-list-item","key":"bkjg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"метод для навигации по точкам (англ. dots);","type":"unordered-list-item","key":"blrrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"навигацию касанием;","type":"unordered-list-item","key":"cqh3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"функциональность Autoplay;","type":"unordered-list-item","key":"crjh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"рендеринг слайдов, стрелок и точек.","type":"unordered-list-item","key":"fjj11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем текущий номер слайда и загруженные изображения в локальном состоянии компонента. Во избежание подсчета пропсов и передачи их в другие компоненты через промежуточные рекомендуется использовать контекст (англ. Context), который предоставляет методы для смены слайдов и текущую информации о слайдере.","type":"unstyled","key":"fligr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент слайдера:","type":"unstyled","key":"24i7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useEffect, useState, createContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { getImages } from \"../../../imagesApi\";\n\nimport Arrows from \"./components/Controls/Arrows\";\nimport Dots from \"./components/Controls/Dots\";\n\nimport SlidesList from \"./components/SlidesList\";\n\nexport const SliderContext = createContext();\n\nconst Slider = function ({ width, height, autoPlay, autoPlayTime }) {\n const [items, setItems] = useState([]);\n const [slide, setSlide] = useState(0);\n const [touchPosition, setTouchPosition] = useState(null)\n\n useEffect(() => {\n const loadData = async () => {\n const images = await getImages();\n setItems(images);\n };\n loadData();\n }, []);\n\n const changeSlide = (direction = 1) => {\n let slideNumber = 0;\n\n if (slide + direction < 0) {\n slideNumber = items.length - 1;\n } else {\n slideNumber = (slide + direction) % items.length;\n }\n\n setSlide(slideNumber);\n };\n\n const goToSlide = (number) => {\n setSlide(number % items.length);\n };\n\n const handleTouchStart = (e) => {\n const touchDown = e.touches[0].clientX;\n\n setTouchPosition(touchDown);\n }\n\n const handleTouchMove = (e) => {\n if (touchPosition === null) {\n return;\n }\n\n const currentPosition = e.touches[0].clientX;\n const direction = touchPosition - currentPosition;\n\n if (direction > 10) {\n changeSlide(1);\n }\n\n if (direction < -10) {\n changeSlide(-1);\n }\n\n setTouchPosition(null);\n }\n\n useEffect(() => {\n if (!autoPlay) return;\n\n const interval = setInterval(() => {\n changeSlide(1);\n }, autoPlayTime);\n\n return () => {\n clearInterval(interval);\n };\n }, [items.length, slide]); // when images uploaded or slide changed manually we start timer\n\n return (\n \n \n \n \n \n \n \n );\n};\n\nSlider.propTypes = {\n autoPlay: PropTypes.bool,\n autoPlayTime: PropTypes.number,\n width: PropTypes.string,\n height: PropTypes.string\n};\n\nSlider.defaultProps = {\n autoPlay: false,\n autoPlayTime: 5000,\n width: \"100%\",\n height: \"100%\"\n};\n\nexport default Slider;","type":"blockquote","key":"bcaju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили компонента слайдера:","type":"unstyled","key":"32gor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".slider {\n overflow: hidden;\n position: relative;\n\n & .slide-list {\n display: flex;\n height: 100%;\n transition: transform 0.5s ease-in-out;\n width: 100%;\n\n & .slide {\n flex: 1 0 100%;\n position: relative;\n\n & .slide-image {\n display: flex;\n margin: 0 auto;\n max-height: 300px;\n width: 100%;\n object-fit: contain;\n }\n\n & .slide-title {\n text-align: center;\n margin-top: 10px;\n }\n }\n }\n}","type":"blockquote","key":"9uop8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видно, архитектура слайдера содержит 3 компонента: SlideList, Arrows и Dots.","type":"unstyled","key":"5e1o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имеются 2 стрелки: слева и справа.","type":"unstyled","key":"44efv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент Arrows:","type":"unstyled","key":"5fcs6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useContext } from \"react\";\nimport { SliderContext } from \"../../Slider\";\n\nimport \"../../styles.scss\";\n\nexport default function Arrows() {\n const { changeSlide } = useContext(SliderContext);\n\n return (\n

changeSlide(-1)} />\n

changeSlide(1)} />\n

\n );\n}","type":"blockquote","key":"fqtqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для стилизации стрелок с обеих сторон используем CSS.","type":"unstyled","key":"95gfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили компонента Arrows:","type":"unstyled","key":"55sfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* ARROWS */\n\n & .arrows {\n color: white;\n display: flex;\n font-size: 30px;\n justify-content: space-between;\n height: 100%;\n position: absolute;\n top: 30%;\n width: 100%;\n z-index: 1;\n\n & .arrow {\n height: 30px;\n width: 30px;\n\n &:hover {\n cursor: pointer;\n }\n\n &.left {\n background-image: url(../../../assets/icons/arrow.png);\n background-repeat: no-repeat;\n background-size: contain;\n margin-left: 5px;\n transform: rotate(\n180deg);\n }\n\n &.right {\n background-image: url(../../../assets/icons/arrow.png);\n background-repeat: no-repeat;\n background-size: contain;\n margin-right: 5px;\n }\n }\n }","type":"blockquote","key":"ekjq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По количеству слайдов отображаем нужное количество точек.","type":"unstyled","key":"f0j8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент Dots:","type":"unstyled","key":"4s34m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useContext } from \"react\";\nimport { SliderContext } from \"../../Slider\";\nimport Dot from \"./Dot\";\n\nimport \"../../styles.scss\";\n\nexport default function Dots() {\n const { slidesCount } = useContext(SliderContext);\n\n const renderDots = () => {\n const dots = [];\n for (let i = 0; i < slidesCount; i++) {\n dots.push();\n }\n\n return dots;\n };\n\n return

{renderDots()}

;\n}","type":"blockquote","key":"cftls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждая точка выглядит так:","type":"unstyled","key":"athhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useContext } from \"react\";\nimport { SliderContext } from \"../../Slider\";\n\nimport \"../../styles.scss\";\n\nexport default function Dot({ number }) {\n const { goToSlide, slideNumber } = useContext(SliderContext);\n\n return (\n goToSlide(number)}\n />\n );\n}","type":"blockquote","key":"2bi2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для отображения слайдов в SlideList можно получить элементы из контекста и выполнить рендеринг компонента Slide с ключами и данными о слайде.","type":"unstyled","key":"b9eke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент SlideList:","type":"unstyled","key":"cg72g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useContext } from \"react\";\nimport Slide from \"./Slide\";\nimport { SliderContext } from \"../Slider\";\n\nimport \"../styles.scss\";\n\nexport default function SlidesList() {\n const { slideNumber, items } = useContext(SliderContext);\n\n return (\n \n {items.map((slide, index) => (\n \n ))}\n

\n );\n}","type":"blockquote","key":"4lifc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяя в стилях transform и translateX, получаем нижепредставленную анимацию. От одного изображения слайда к другому перемещаемся по номеру слайда в массиве:","type":"unstyled","key":"5thlb"},{"data":{"image":{"id":"635c41a4dad2483071c60e37"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bufrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент Slide включает 2 компонента: SlideImage и SlideTitle. Данная архитектура в перспективе позволяет добавлять новые функциональности для каждого слайда.","type":"unstyled","key":"2fo31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент Slide:","type":"unstyled","key":"cuusa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from \"react\";\nimport SlideTitle from \"./SlideTitle\";\nimport SlideImage from \"./SlideImage\";\n\nimport \"./../styles.scss\";\n\nexport default function Slide({ data: { url, title } }) {\n return (\n

\n \n \n

\n );\n}","type":"blockquote","key":"919d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент SlideImage:","type":"unstyled","key":"8ctbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from \"react\";\n\nimport \"../styles.scss\";\n\nexport default function SlideImage({ src, alt }) {\n return {alt}

;\n}","type":"blockquote","key":"7cnlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент SlideTitle:","type":"unstyled","key":"fee30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from \"react\";\n\nimport \"../styles.scss\";\n\nexport default function SlideTitle({ title }) {\n return

{title}

;\n}","type":"blockquote","key":"4j0fj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Варианты оптимизации","type":"header-three","key":"91l1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предположим, что слайдер содержит много изображений и нуждается в оптимизации. Ее суть состоит в изменении анимации слайдов.","type":"unstyled","key":"1s61p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможны 2 варианта оптимизации.","type":"unstyled","key":"66mmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одновременный показ 3-х слайдов.","type":"ordered-list-item","key":"bvdi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Показ только 1 слайда за раз.","type":"ordered-list-item","key":"h1i3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим их.","type":"unstyled","key":"c5qbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оптимизация с одновременным показом 3-х слайдов","type":"header-three","key":"3vql5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете выбрать данный вариант оптимизации при желании использовать transform для смены слайдов.","type":"unstyled","key":"6s1d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом случае мы отображаем одновременно только 3 слайда: активный в середине, предыдущий и следующий. Объясняется это тем, что пользователь чаще всего нажимает на стрелки для перемещения на один слайд назад или вперед. При автоматической смене слайдов мы каждый раз перемещаемся вперед.","type":"unstyled","key":"d7st9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При переходе к предыдущему или следующему слайду мы определяем 3 новых слайда и отображаем их.","type":"unstyled","key":"9odqk"},{"data":{"image":{"id":"635c41a44c69fd2a5f92015a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одновременный рендеринг 3-х слайдов","type":"atomic:image","key":"d8hmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оптимизация с показом 1 слайда","type":"header-three","key":"25vl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При намерении задействовать анимацию в CSS вы можете каждый раз отображать один слайд с информацией.","type":"unstyled","key":"fh1ju"},{"data":{"image":{"id":"635c41a4088a2c0d4dc2b143"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг одного слайда за раз","type":"atomic:image","key":"3t8lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример возможных эффектов анимации:","type":"unstyled","key":"cou9o"},{"data":{"image":{"id":"635c41a5bce839363c84e238"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимация с эффектом прозрачности (англ. opacity)","type":"atomic:image","key":"20sbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот вариант оптимизации требует корректировки решения.","type":"unstyled","key":"cj9n8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нет необходимости в компоненте SlidesList, и мы отображаем только один компонент Slide (строка 99).","type":"unstyled","key":"6rvjj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, устанавливаем управление эффектом анимации и применяем его только при изменении содержимого слайда (строка 41).","type":"unstyled","key":"4hmuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве последнего изменения для улучшения пользовательского опыта предварительно загружаем изображения: предшествующее текущему слайду и следующее за ним (строка 25).","type":"unstyled","key":"4smc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент Slide для оптимизации с показом одного слайда:","type":"unstyled","key":"bghkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useEffect, useState, createContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { getImages } from \"../../../imagesApi\";\n\nimport Arrows from \"./components/Controls/Arrows\";\nimport Dots from \"./components/Controls/Dots\";\n\nimport Slide from \"./components/Slide\";\n\nexport const SliderContext = createContext();\n\nconst Slider = function ({ width, height, autoPlay, autoPlayTime }) {\n const [items, setItems] = useState([]);\n const [slide, setSlide] = useState(0);\n const [animation, setAnimation] = useState(true);\n\n useEffect(() => {\n const loadData = async () => {\n const images = await getImages();\n setItems(images);\n };\n loadData();\n }, []);\n\n const preloadImages = () => {\n const prevItemIndex = slide - 1 < 0 ? items.length - 1 : slide - 1;\n const nextItemIndex = (slide + 1) % items.length;\n\n new Image().src = items[slide].url;\n new Image().src = items[prevItemIndex].url;\n new Image().src = items[nextItemIndex].url;\n }\n\n useEffect(() => {\n if (items.length) {\n preloadImages();\n }\n }, [slide, items])\n\n const changeSlide = (direction = 1) => {\n setAnimation(false);\n let slideNumber = 0;\n\n if (slide + direction < 0) {\n slideNumber = items.length - 1;\n } else {\n slideNumber = (slide + direction) % items.length;\n }\n\n setSlide(slideNumber);\n\n const timeout = setTimeout(() => {\n setAnimation(true);\n }, 0);\n\n return () => {\n clearTimeout(timeout)\n }\n };\n\n const goToSlide = (number) => {\n setAnimation(false);\n setSlide(number % items.length);\n\n const timeout = setTimeout(() => {\n setAnimation(true);\n }, 0);\n\n return () => {\n clearTimeout(timeout)\n }\n };\n\n useEffect(() => {\n if (!autoPlay) return;\n\n const interval = setInterval(() => {\n changeSlide(1);\n }, autoPlayTime);\n\n return () => {\n clearInterval(interval);\n };\n }, [items.length, slide]); // when images uploaded or slide changed manually we start timer\n\n return (\n

\n \n \n {\n items.length ? (\n \n ) : null\n }\n \n \n

\n );\n};\n\nSlider.propTypes = {\n autoPlay: PropTypes.bool,\n autoPlayTime: PropTypes.number,\n width: PropTypes.string,\n height: PropTypes.string\n};\n\nSlider.defaultProps = {\n autoPlay: false,\n autoPlayTime: 5000,\n width: \"100%\",\n height: \"100%\"\n};\n\nexport default Slider;","type":"blockquote","key":"cq23a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В Slide вносится только одно изменение: он задействует класс с анимацией при смене слайда:","type":"unstyled","key":"7f94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from \"react\";\nimport SlideTitle from \"./SlideTitle\";\nimport SlideImage from \"./SlideImage\";\n\nimport \"./../styles.scss\";\n\nexport default function Slide({ data: { url, title }, animation }) {\n return (\n

\n \n \n

\n );\n}","type":"blockquote","key":"93cmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация анимации fadeIn в стилях:","type":"unstyled","key":"8pip8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".slider {\n overflow: hidden;\n position: relative;\n\n & .slide {\n flex: 1 0 100%;\n position: relative;\n\n &.fadeInAnimation {\n animation: fadeIn 1.5s;\n }\n\n @keyframes fadeIn {\n 0% { opacity: 0; }\n 100% { opacity: 1; }\n }\n\n & .slide-image {\n display: flex;\n margin: 0 auto;\n max-height: 300px;\n width: 100%;\n object-fit: contain;\n }\n\n & .slide-title {\n text-align: center;\n margin-top: 10px;\n }\n }\n}","type":"blockquote","key":"1shi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дополнительные предложения по оптимизации","type":"header-three","key":"5cjsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Скорректировать размер изображения. Нет необходимости в разрешении Full HD для слайдера с ограниченным размером.","type":"ordered-list-item","key":"bu2qb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"Выбрать формат WebP для уменьшения размера изображений. Он сжимает на 20–30% лучше, чем jpg и png.","type":"ordered-list-item","key":"3t7pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Избегать изображений со 100% качеством. 70–85% качества выглядят также, как и 100%, но при этом размер изображений меньше.","type":"ordered-list-item","key":"262vd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Уменьшить размеры исходного кода JavaScript и стилей.","type":"ordered-list-item","key":"899vf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Использовать CDN для хранения изображений.","type":"ordered-list-item","key":"epdn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Задействовать Brotli для сжатия.","type":"ordered-list-item","key":"316mg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Окончательный размер данных при Brotli-сжатии на 14–21% меньше, чем в случае Gzip.","type":"unstyled","key":"79pun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"91bud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация собственного слайдера изображений не требует специальных знаний. Потренируйтесь в его создании без опоры на интернет и за ограниченное время.","type":"unstyled","key":"c8t08"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":6,"offset":25}],"inlineStyleRanges":[],"text":"Весь код предоставлен на GitHub.","type":"unstyled","key":"cbkqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"77sme"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":42,"offset":0}],"inlineStyleRanges":[],"text":"Версионирование независимых UI-компонентов","type":"unordered-list-item","key":"935ss"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":57,"offset":0}],"inlineStyleRanges":[],"text":"7 основных навыков, необходимых для фронтенд-разработчика","type":"unordered-list-item","key":"at5tg"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":27,"offset":0}],"inlineStyleRanges":[],"text":"Что делает сайты медленнее?","type":"unordered-list-item","key":"fscqb"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":14},{"key":6,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"7596c"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":11,"offset":15},{"key":8,"length":66,"offset":28}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Yan Tsishko: Implementing Image and Text Slider With React.js And Optimizations","type":"unstyled","key":"46f0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"v3yMPty5062S6APstFBK"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/16375/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://github.com/yantsishko/slider-from-scratch-reactjs/tree/main","url":"https://github.com/yantsishko/slider-from-scratch-reactjs/tree/main"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/6229/","url":"https://nuancesprog.ru/p/6229/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/12245/","url":"https://nuancesprog.ru/p/12245/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/13647/","url":"https://nuancesprog.ru/p/13647/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://yantsishko.medium.com/?source=post_page-----7a16af998548--------------------------------","url":"https://yantsishko.medium.com/?source=post_page-----7a16af998548--------------------------------"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://betterprogramming.pub/implementing-image-and-text-slider-with-react-js-and-optimizations-7a16af998548","url":"https://betterprogramming.pub/implementing-image-and-text-slider-with-react-js-and-optimizations-7a16af998548"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}