Создаем слайдер с изображением и текстом на React.js с нуля и оптимизируем

[KSCF]

Слайдер должен быть респонсив

Собственно на этом у меня начался ступор )))

Слайдер должен быть отзывчивым? Отзываться на фразу "к ноге"?

[yantishko]

Как минимум отзываться на разных девайсах ?

https://www.w3schools.com/html/html_responsive.asp

[non-aligned]

интересная статья. буквально месяц назад защищал ВКР бакалавра, создавал почти такой же слайдер с помощью разных инструментов (React, Vue, Angular). только еще работал с событиями для возможности свайпать слайды на сенсорных устройствах)

[yantishko]

Точно, спасибо, хотел это добавить и забыл :)

[TAZAQ]

Сейчас на бакалавриате защищают слайдеры?)

Или есть какая-то проблема с двойным дном?

[non-aligned]

я проводил сравнительный анализ фреймворков, а для практической части решил выбрать создание слайдера

[little-brother]

Если не секрет, то сколько по времени заняло? В 45 минут уложились на каждом фреймворке?

[yantishko]

Первая пробная попытка заняла около 4х часов. На интервью решил за 45 минут, потому что уже знал структуру. Делал на React.js.

Решение с 3мя слайдами для статьи заняло у меня 10 часов, а все потому, что я не мог понять, почему useEffect вызывается 2 раза и анимация срабатывает 2 раза, оказалось баг (либо фича) в реакте 18, откатился на 17-й и все стало ок.

Без практики будет очень сложно

[Nik_o_lay]

это фича. достаточно было убрать strict mode

https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

[yantishko]

Убирал, не помогло :)

[Nik_o_lay]

const goTo = useCallback(goToSlide);

какой профит использовать здесь useCallback?

[yantishko]

согласен, в данном случае никакого, не дорефакторил. Обновил решение, спасибо

[wadowad]

Тоже потихоньку пилю свой слайдер (на jQuery). Кроме перечисленных у меня есть ещё два основных требования: возможность свайпа и "лёгкость" - допустимы только css-анимации. Для свайпа на мобильных использую сочетание overflow-x: auto и scroll-snap-type: x proximity. А что куда и на сколько сдвинулось считаю по факту, чем обеспечиваю совместимость с управлением "стрелками" и "точками". Разница между существующими решениями (например, в сравнении с тяжёлым Slick Slider) на мобильных устройствах заметна с первого прикосновения, т.к. css отрабатывает мгновенно.

[yantishko]

Да, нужно использовать CSS по максимуму, он работает на GPU и это гораздо быстрее.

Почему jQuery? Я думал он уже мертв :)

[wadowad]

Просто пишу на том, что уже знаю. Очень медленно осваиваю нативный js. Либо мной движет лень, либо я просто не успеваю. Многое хочется сделать, но времени в сутках не хватает. Программирование для меня скорее хобби. А менять род деятельности наверно уже поздновато. Вот как-то так...

jQuery до ужаса прост, его синтаксис понятен "с пол-пинка", под него написано куча плагинов на все случаи жизни, поэтому он вряд ли умрёт. Статистика это подтверждает: https://github.com/get-set-fetch/scraper/blob/main/datasets/javascript-libs-from-top-1mm-sites/charts/most-used-js-libs-2022-06-05.svg

[yantishko]

Я думаю это отличная возможность поработать с нативным js, изучать как работают эвенты разные

[Gldkru]

Легкость и jquery...

Если вы пишите свой велосипед не для практики, проще взять библиотеку на js, которая явно будет легче, чем библиотека jquery.

Он еще не мертв, потому что большая часть интернета легаси. Уж если у вас мало времени, то точно не стоит тратить его на jquery.

[akunilovskii]

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

[yantishko]

В оптимизации с 3-мя слайдами это реализовано, на гитхабе отдельная ветка https://github.com/yantsishko/slider-from-scratch-reactjs/tree/optimization-with-3-slides