⚛️ React Swiper.js 滑块
介绍
滑动滑块
让我们开始吧
响应式
剧终
介绍
事实上，今天的文章不仅致力于如何制作一个特定的滑块（您可以在本文预览中看到），而且还致力于如何在 React 中轻松实现各种简单的滑块。
我今天要展示的这个滑块示例是我另一个项目的一部分。这个滑块由许多列组成，每一列又是一个结构，每个结构又划分为不同的国家，每一列中都包含这些国家艺术家的信息。
滑动滑块
让我们开始吧
01. Swiper.js
首先，我们需要连接Swiper.js。您可以点击链接下载，或者直接npm在控制台中输入命令进行连接npm i swiper。您可以在 React 部分的官方页面上阅读所有文档。
由于我是在CodePen中创建一个滑块，所以我通过该部分的设置连接了链接JS。
要获取链接，请点击按钮Settings，然后选择JS相应部分。
我们还需要进行连接Swiper.css才能正确渲染幻灯片。（您可以随时根据需要更改样式）。
要获取链接，请点击按钮Settings，然后选择CSS相应部分。
02. 功能
首先，我们需要创建一个Slider类，在其中指定滑块的特性，并渲染一个用于幻灯片的容器。
class Slider extends React.Component {
componentDidMount() {
new Swiper(this.refs.slider,{
slidesPerView : this.props.slidePerView,
slidesPerGroup: this.props.slidesPerGroup,
loop: this.props.loop,
freeMode: true
});
}
render() {
return (
<div className="containerSlider">
<div className="swiper-container" ref="slider">
<div className="swiper-wrapper">
{this.props.children}
</div>
</div>
</div>
)
}
}
componentDidMount()
- slidesPerView - 每视图显示的幻灯片数量（幻灯片容器中同时显示的幻灯片数量）。（我个人将其设置为auto ，因为我希望幻灯片看起来更自然，但如果您不想费心调整幻灯片的大小，只需指定屏幕上一次显示的幻灯片数量即可。）
- slidesPerGroup - 设置要定义和启用分组滑动的幻灯片数量。与 slidesPerView > 1 一起使用时非常有用。（此属性是必需的，以便在您将滑块旋转到末尾时，自动跳转到滑块的开头，这样您就不必再返回。这对于较长的滑块来说尤为重要。）
- 循环- 设置为 true 可启用连续循环模式。
- 自由模式- 启用后，幻灯片将不再固定位置。您可以将幻灯片停在任何方便的滚动位置。
使成为（）
- containerSlider - 您可以随意命名此类，它用于设置整个滑块的尺寸。
- swiper-container和swiper-wrapper这两个类名应该保留原样。它们是滑块正常工作所必需的。
您可以在官方网站的API 部分找到其他大部分属性。
03. 创建幻灯片
创建好轮播图容器并指定其属性后，接下来需要设置幻灯片的样式。正如我之前提到的，轮播图由若干个部分组成7 sections，每个部分都是一个列表country，每个部分都包含关于这些国家/地区的简要信息artists。
我决定将所有幻灯片设置520px为相同大小，但您可以使用伪类为每个幻灯片设置不同的大小nth-child()。
2 artists将在每张幻灯片中呈现。
为此，我们需要创建一个函数来计算DOM structure幻灯片的宽度。你可以随意命名这个函数，我个人把它叫做Сountries……
function Сountries(props) {
return(
<div className="swiper-slide">
<div className="countryTitle">
<h2 className="countryTitle__name">{props.countryTitle}</h2>
</div>
<div className="painter">
<div className="painter__info">
<div className="painter__textWrap">
<div className="painter__text">
<h1 className="painter__name">{props.name}</h1>
<p className="painter__years">{props.born}</p>
</div>
</div>
<div className="painter__imgWrap">
<div className="painter__img">
<div className={`painter__imgBg _bg_${props.class}`}></div>
</div>
</div>
</div>
</div>
<div className="painter">
<div className="painter__info">
<div className="painter__textWrap">
<div className="painter__text">
<h1 className="painter__name">{props.name2}</h1>
<p className="painter__years">{props.born2}</p>
</div>
</div>
<div className="painter__imgWrap">
<div className="painter__img">
<div className={`painter__imgBg _bg_${props.class2}`}></div>
</div>
</div>
</div>
</div>
</div>
);
}
在函数内部，我们指定了一些特殊参数，properties我们可以用它们来填充information about our artists。
04. 内容
现在我们只需要在滑块中填充内容，并在其中添加我们需要的信息。
为此，我们需要创建一个类，并在其中Slider使用<Slider slidePerView="auto" slidesPerGroup="7"></Slider>标签指定该类。
class App extends React.Component {
render() {
return (
<Slider slidePerView="auto" slidesPerGroup="7">
</Slider>
)
}
}
在Slider标签内部，我们需要根据需要单独插入任意数量的幻灯片。我们将使用类来实现这一点Countries，并在类中指定DOM structure幻灯片的样式。
例子：
<Сountries countryTitle="Italy"
name="Titian Vecellio" born="1488 - 1576" class="titian"
name2="Leonardo da Vinci" born2="1452 - 1519" class2="vinci" />
大致情况如下：
class App extends React.Component {
render() {
return (
<Slider slidePerView="auto" slidesPerGroup="7">
<Сountries countryTitle="Italy"
name="Titian Vecellio" born="1488 - 1576" class="titian"
name2="Leonardo da Vinci" born2="1452 - 1519" class2="vinci" />
<Сountries countryTitle="France"
name="Louis-Michel van Loo" born="1707 - 1771" class="vanLoo"
name2="Eugene Delacroix" born2="1798 - 1863" class2="delacroix" />
<Сountries countryTitle="Spain"
name="Bartholomew Murillo" born="1618 - 1682" class="murillo"
name2="El Greco" born2="1541 - 1614" class2="greco" />
<Сountries countryTitle="Belgium"
name="Jan van Eyck" born="1385 - 1441" class="eyck"
name2="Anthony van Dyck" born2="1599 - 1641" class2="dyck" />
<Сountries countryTitle="Germany"
name="Rafael Mengs" born="1728 - 1779" class="mengs"
name2="Franz Xaver Winterhalter" born2="1818 - 1885" class2="winterhalter" />
<Сountries countryTitle="Russia"
name="Karl Pavlovich Brullov" born="1799 - 1852" class="brullov"
name2="Viktor Mikhailovich Vasnetsov" born2="1848 - 1926" class2="vasnetsov" />
<Сountries countryTitle="Netherlands"
name="Pieter Bruegel The Elder" born="1525 - 1569" class="bruegel"
name2="Peter Paul Rubens" born2="1577 - 1640" class2="rubens" />
</Slider>
)
}
}
05.渲染
剩下的就是渲染类App，一切就绪了。
ReactDOM.render(<App />, document.getElementById('root'));
响应式
该网站已适配以下屏幕分辨率：@media screen and (orientation: landscape) and (max-height: 780px)
@media screen and (orientation: landscape) and (max-height: 630px)
@media screen and (orientation: landscape) and (max-height: 540px)
@media screen and (orientation: landscape) and (max-height: 460px)
@media screen and (max-width: 1600px)
@media screen and (max-width: 1440px)
@media screen and (max-width: 1366px)
@media screen and (max-width: 1280px)
@media screen and (max-width: 1024px)
@media screen and (max-width: 768px)
@media screen and (max-width: 414px)
@media screen and (max-width: 375px)
@media screen and (max-width: 320px)
@media screen and (max-width: 680px) and (max-height: 520px)
剧终
最后，值得一提的是，这并非创建滑块的最佳方法，我也同意你的看法。如果我在实际项目中制作类似的滑块，我会将其输出为一个对象，并创建更多组件。但我写这篇文章的目的只是为了让初学者简单了解如何制作这类滑块。
感谢您抽出宝贵时间阅读我的帖子。下次再见。
建议您关注我的推特，我也会在那里发布我的作品。
再见。祝你滑得愉快。