Карусель - это очень важная вещь для веб-сайта, независимо от того, хотите ли вы включить в нее своих партнеров или отзывы клиентов, карусель - это единственный элемент, который может помочь вам удовлетворить все это.
Добро пожаловать в ваше очень быстрое руководство по вашему идеальному слайдеру React Carousel. Так что, не теряя больше времени, давайте погрузимся в ...
Что такое React-Slick
React-slick - отличный npm-пакет, цель которого - быстро сделать карусель на вашем веб-сайте. Давайте не будем забывать о его еженедельной статистике загрузок, что делает его одной из самых популярных каруселей.
Итак, как это началось
Поэтому изначально для последнего веб-сайта onTribe мы попытались использовать реакцию-карусель от brainhubeu для наших компаний, поддерживаемых бета-версией. Пакет имеет отличную документацию, но, к сожалению, не отвечает в отношении автозапуска.
Следовательно, мы решили пойти с React-Slick!
Приступим к реализации
Так что попробуйте response-slick, пожалуйста, не забудьте включить файлы CSS (выделенные жирным шрифтом) вместе с React и импортом пакетов.
import React from "react"; import Slider from "react-slick"; // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";
Итак, скажем, после импорта вышеуказанных пакетов, файлов CSS и файлов изображений ваш код выглядит примерно так:
Как видите, изменения в реквизитах нашего слайдера внесены в ModifiedCarouselSlider.js
файл
По умолчанию размер вашего изображения составляет 1 пиксель, и добавление className в ваш тег <img>
не повлияет на ситуацию 😵.
Не беспокойтесь, мы все равно дойдем до вашей красивой карусели.
Однако в пакете есть свои собственные компоненты стиля, изменение свойства стиля которых поможет вам получить идеальный слайдер.
Пожалуйста, следуйте приведенному ниже файлу CSS, который реализует слайдер React с правильным размером изображения и скрытыми стрелками.
И да! Мы закончили 🎉
Также предлагаю проверить это. Поскольку многие из нас быстро бегают по документации на GitHub и сталкиваются с ошибками.
Прежде чем ты уйдешь
Привет! Меня зовут Дхайрья Оствал, я изучаю информатику и в настоящее время работаю Frontend-разработчиком @ontribe.
Хотелось бы услышать ваше мнение о моей работе в комментариях.
Свяжитесь со мной в LinkedIn, Instagram, Medium, GitHub.