将旋转木马集成到我们的网络应用中的需求经常出现。旋转木马是在一个空间中显示多个项目的UI组件。
它们是网页上最有美感的组件之一，但往往被证明很难从头开始创建，特别是在React这样的框架中。
React Slick是一个用于创建旋转木马的伟大库。它提供了可访问性和响应性--以及其他功能--来帮助你创建高性能的旋转木马。在这篇文章中，你将学习如何用React Slick创建一个简单的旋转木马组件，并探索它的一些主要功能。
前提条件
要继续学习，你应该对以下内容有一个基本的了解
- React
- ES6（传播运算符，可选链式）。
设置项目
在本教程中，我们将创建一个旋转木马视图，显示酒店的可用房间。
打开你的终端，运行以下命令来安装React。
npx create-react-app react-carousel
接下来移动到react-carousel目录。
cd react-carousel
并安装以下依赖项。
npm install react-slick slick-carousel react-icons
React Slick是为我们提供旋转木马组件的主要库。slick-carousel为这个组件提供样式，而react-icons将被用来导入图标。
这个应用程序的所有样式都位于源代码中的src/index.css 。查看实时项目。
创建旋转木马组件
从根目录中，创建路径components/Carousel.js ，并将这个组件导入到App.js 。
//App.js
import Carousel from "../components/Carousel";
export default function App() {
return <Carousel />;
}
通常情况下，旋转木马的每个项目所显示的内容是相似的。因此，我们可以将这些内容存储在一个数组中，就像这样。
// Carousel.js
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
export default function Carousel() {
const hotelCards = [
{
imageSrc:
'https://images.unsplash.com/photo-1559508551-44bff1de756b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80',
title: 'Studio Room',
description: 'Lorem ipsum dolor sit amet, consectur dolori',
pricingText: 'USD 50/Day',
features: ['Free Wifi', 'Free breakfast'],
},
{
imageSrc:
'https://images.unsplash.com/photo-1616940844649-535215ae4eb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80',
title: 'Deluxe Room',
description: 'Lorem ipsum dolor sit amet, consectur dolori',
pricingText: 'USD 80/Day',
features: ['Free Wifi', 'Free breakfast'],
},
{
imageSrc:
'https://images.unsplash.com/photo-1599619351208-3e6c839d6828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80',
title: 'King Deluxe Room',
description: 'Lorem ipsum dolor sit amet, consectur dolori',
pricingText: 'USD 150/Day',
features: ['Free Wifi', 'Free breakfast', 'Discounted Meals'],
},
{
imageSrc:
'https://images.unsplash.com/photo-1461092746677-7b4afb1178f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
title: 'Royal Suite',
description: 'Lorem ipsum dolor sit amet, consectur dolori',
pricingText: 'USD 299/Day',
features: [
'Free Wifi',
'Free breakfast',
'Discounted Meals',
"MacBook for work use (hotel's property)",
],
},
]
return (
<div className='content'></div>
)
}
注意我还在组件的顶部从slick-carousel导入了两个样式表。
使用Slider 和配置Slider 设置
有了我们需要的内容，让我们开始绘制旋转木马组件的结构图。React Slick有一个Slider 组件，负责显示旋转木马。
// Carousel.js
import Slider from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
export default function Carousel() {
const sliderSettings = {
slidesToShow: 3,
slidesToScroll: 1,
infinite: false,
}
const hotelCards = [
// ...
]
return (
<div className='content'>
<Slider {...sliderSettings}>
{hotelCards.map((card, index) => (
<div key={index}>
<h2>{card.title}</h2>
<img alt={card.title} src={card.imageSrc} width="100" height="100" />
<p>{card.description}</p>
<ul>
{card.features.map((feature, index) => (
<li key={index}>{feature}</li>
))}
</ul>
<button className='btn'>Buy Now</button>
</div>
))}
</Slider>
</div>
)
}
在上面的代码块中，我们已经创建了一个sliderSettings 变量来存储旋转木马的设置。然后我们把这个对象扩散到Slider 组件中。
sliderSettings 到目前为止有三个配置。
slidesToShow- 数字来决定保持浏览的幻灯片数量slidesToScroll- 数字，确定导航旋转木马时要移动的幻灯片的数量infinite- 布尔值（Boolean），确定当到达最后一个项目时，旋转木马是否继续循环。
在这一点上，最终的结果应该是这样的。
N.B. React Slick有更多的旋转木马配置，我们马上就会讨论。
自定义下一个和上一个按钮
React Slick给出的默认控制按钮可以完成工作，但可能无法通过UI测试。
因此，让我们创建我们自己的自定义按钮，并使用React Slick的API来使它们发挥作用。我们将从删除按钮开始。
// Carousel.js
import {useState} from 'react'
import Slider from 'react-slick'
import {FaChevronLeft, FaChevronRight} from 'react-icons'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
export default function Carousel() {
const [sliderRef, setSliderRef] = useState(null)
const sliderSettings = {
// removes default buttons
arrows: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: false,
}
const hotelCards = [
// ...
]
return (
<div className='content'>
<div className='controls'>
<button>
<FaChevronLeft />
</button>
<button>
<FaChevronRight />
</button>
</div>
<Slider ref={setSliderRef} {...sliderSettings}>
{pricingCards.map((card, index) => (
<div key={index}>
<h2>{card.title}</h2>
<p>{card.description}</p>
<ul>
{card.features.map((feature, index) => (
<li key={index}>{feature}</li>
))}
</ul>
<button>Buy Now</button>
</div>
))}
</Slider>
</div>
)
}
为了能够访问React Slick的API，我们必须将Slider 的实例存储在一个变量（state）中，方法是将Slider 的ref值链接到state--其初始值被设置为null 。当组件渲染时，我们可以通过这个状态访问API。
我们想从API中使用的两个函数是slickPrev 和slickNext ，它们分别按照slidesToScroll 中指定的数字来前后移动旋转木马。在按钮上应用这个，我们的返回函数应该是这样的。
return (
<div className='content'>
<button onCLick={sliderRef?.slickPrev}>
<FaChevronLeft />
</button>
<button onCLick={sliderRef?.slickNext}>
<FaChevronRight />
</button>
<Slider ref={setSliderRef} {...sliderSettings}>
{pricingCards.map((card, index) => (
<div key={index}>
<h2>{card.title}</h2>
<p>{card.description}</p>
<ul>
{card.features.map((feature, index) => (
<li key={index}>{feature}</li>
))}
</ul>
<button>Buy Now</button>
</div>
))}
</Slider>
</div>
)
响应性设置
React Slick还让我们通过responsive 属性来控制响应性。
responsive 属性是一个数组，有两个值：breakpoint 和settings 。
breakpoint- 我们希望后续设置生效的数字（像素）。settings- 包含旋转木马设置的对象，在达到断点时应用。
将以下配置添加到sliderSettings 。
const sliderSettings = {
// ...
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
}
}
]
};
有了这个配置，在不影响用户体验的情况下，控制我们的旋转木马在多个设备上的视图就变得容易了。
除了响应性之外，React Slick还将其accessibility 选项默认设置为true 。这允许方向键和在旋转木马上拖动鼠标的手势来移动旋转木马。
下面是一些其他的设置，你可以尝试一下。在他们的页面上查看所有的例子。
const settings = {
fade: true ,
speed: 500, // ms
autoplay: false,
initialSlide: 2,
lazyLoad: true,
autoplaySpeed: 3000,
}
结论
React Slick是一个充满了良好选项的库，可以很容易地融入你的网络项目。在npm上有80万以上的下载量，React Slick可能真的是你最后需要的React旋转木马。
The postCreating a carousel with React Slickappeared first onLogRocket Blog.
