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

Добро пожаловать в ваше очень быстрое руководство по вашему идеальному слайдеру 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.