ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Самый простой React слайдер изображений

Самый простой React слайдер изображений

Самый простой React слайдер изображений
Один из самых простых и автоматических слайдеров изображений на React JS, который не сложный по дизайну, но понятен своими функциями для многих. В данном материале вы узнаете про один оригинальный слайд, где изображение в ссылках прописываем в стилистике, а также как самому выставить и настроить автоматический слайдер изображений, который выполнен при помощи react.Js. Только один минус замечен, он не адаптивный по умолчанию, но думаю будет не сложно, ведь под дизайн выставлено всего 2 класса, на которых все оформление держится.

А в HTML у нас одно значение, это div, где в нем прописан один из главных классов, где нужно ставить по месту, где хотите видеть данную карусель тематических картинок. Если вам нужно отредактировать скорость, но в JS находим delay = 3500, и ставим к примеру 4000 и начинает быстрей сменятся слайды, а если меньше, то намного медленней идет смена снимков. Существуют разные типы реагирующих слайдеров изображений, если сделано на чистом CSS то весь функционал идет на стили, потому кому-то легче сделать JS под все функции, а в стилях только останется оформление, как на данном материале.

Так выглядит в реале, а точнее после установки:

Автоматический React слайд с каруселью картинок

Как создать автоматический слайдер с помощью React и CSS


Установка:

В head где находится слайд

Код
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

HTML

По месту установление каркаса слайда.

Код
<div id="avtomak_slaydera"></div>

CSS

Код
.utomatica {
  margin: 0 auto;
  overflow: hidden;
  width: 780px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sliderauto:nth-child(1){
  color: #100f0f;
  background: url('Ссылка на изображение №1');
  background-size: cover;
}
.sliderauto:nth-child(2){
  color: #100f0f;
  background: url('Ссылка на изображение №2');
  background-size: cover;
}
.sliderauto:nth-child(3){
  color: #100f0f;
  background: url('Ссылка на изображение №3');
  background-size: cover;
}

.utomaticaSlider {
  white-space: nowrap;
  transition: ease 1s;
}

.sliderauto {
  display: inline-block;
  height: 330px;  
  width: 100%;
}

/* Кнопки */

.kutomhouga {
  text-align: center;
}

.utomaticaDot {
  display: inline-block;
  height: 18px;
  width: 18px;
  border-radius: 100%;
  cursor: pointer;
  margin: 15px 7px 0px;
  background-color: #ede7e7;
}

.utomaticaDot.active {
  background-color: #0183ff;
}

JS

Код
const colors = ["", "", ""];
const delay = 3500;

function utomatica() {
  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);

  function resetTimeout() {
  if (timeoutRef.current) {
  clearTimeout(timeoutRef.current);
  }
  }

  React.useEffect(() => {
  resetTimeout();
  timeoutRef.current = setTimeout(
  () =>
  setIndex((prevIndex) =>
  prevIndex === colors.length - 1 ? 0 : prevIndex + 1),

  delay);

  return () => {
  resetTimeout();
  };
  }, [index]);

  return (
  React.createElement("div", { className: "utomatica" },  
  React.createElement("div", {
  className: "utomaticaSlider",
  style: { transform: `translate3d(${-index * 100}%, 0, 0)` } },

  colors.map((backgroundColor, index) =>  
  React.createElement("div", {
  className: "sliderauto",
  key: index,
  style: { backgroundColor } }))),  
   
  React.createElement("div", { className: "kutomhouga" },
  colors.map((_, idx) => /*#__PURE__*/
  React.createElement("div", {
  key: idx,
  className: `utomaticaDot${index === idx ? " active" : ""}`,
  onClick: () => {
  setIndex(idx);
  } })))));
}

ReactDOM.render( React.createElement(utomatica, null), document.getElementById("avtomak_slaydera"));

В случае автоматического показа изображения, то все меняется под заданные вами параметры. В этом слайде прописано время в миллисекундах под изменения изображение, которое по умолчанию идет в 3 с половиной секунды.

А вот само изменение прописанных ссылок под изображение, то здесь активировано React, что идет в JS, где расположили на станице или в низ сайта, чтоб на всех страницах мог слайд работать, но это редко, основном где идет код HTML на той странице, где решите выставить слайды.

Демонстрация
26 Июня 2022 Загрузок: 2 Просмотров: 1821 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 26 Июня 2022 00:331
0
Просьба, у кого время будет, то можете адаптировать данный слайдер, где сам пробовал, не получилось, все забыл.
avatar