Самый простой React слайдер изображений
 | |
| Один из самых простых и автоматических слайдеров изображений на React JS, который не сложный по дизайну, но понятен своими функциями для многих. В данном материале вы узнаете про один оригинальный слайд, где изображение в ссылках прописываем в стилистике, а также как самому выставить и настроить автоматический слайдер изображений, который выполнен при помощи react.Js. Только один минус замечен, он не адаптивный по умолчанию, но думаю будет не сложно, ведь под дизайн выставлено всего 2 класса, на которых все оформление держится. А в HTML у нас одно значение, это div, где в нем прописан один из главных классов, где нужно ставить по месту, где хотите видеть данную карусель тематических картинок. Если вам нужно отредактировать скорость, но в JS находим delay = 3500, и ставим к примеру 4000 и начинает быстрей сменятся слайды, а если меньше, то намного медленней идет смена снимков. Существуют разные типы реагирующих слайдеров изображений, если сделано на чистом CSS то весь функционал идет на стили, потому кому-то легче сделать JS под все функции, а в стилях только останется оформление, как на данном материале. Так выглядит в реале, а точнее после установки:  Как создать автоматический слайдер с помощью 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 на той странице, где решите выставить слайды. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
