超级灵活的CSS旋转木马，可通过JavaScript导航增强

构建一种多功能的旋转木制组件，该组件毫不费力地处理众多项目，提供光滑的滚动，并提供动态按钮导航是一个普遍的挑战。该教程指导您使用React和CSS创建这样的组件。

我们的目标是响应式旋转木马，具有平稳的过渡和直观的导航。我们将利用JavaScript，React和DOM API。

项目设置

让我们首先创建一个新的React应用程序和安装styled-components ：

 npx create-react-app react-easey-carousel
CD反应 - 播种机
纱线添加了样式的组件
纱线安装
纱线开始

为了简化样式，我们将使用预定义的样式组件：

 // app.styled.js
从“样式组件”中导入样式；

导出const H1 =样式（'H1'）``
  文字平衡：中心；
  保证金：0;
  填充底：10REM；
`;

导出const ferver =样式（'div'）``
  位置：相对；
`;

导出const flex =样式（'div'）'
  显示：Flex;
`;

导出const hormontalcenter =样式（flex）``
  Jusify-content：中心；
  左翼：自动；
  边缘权利：自动；
  最大宽度：25REM；
`;

导出const容器=样式（'div'）``
  身高：100VH；
  宽度：100％；
  背景：＃ecf0f1;
`;

导出const item =样式（'div'）'
  颜色：白色；
  字体大小：2REM;
  文本转换：大写；
  宽度：$ {（{size}）=>`$ {size} rem`};
  高度：$ {（{size}）=>`$ {size} rem`};
  显示：Flex;
  准项目：中心；
  Jusify-content：中心；
`;

接下来，我们将构建我们的App.js组件：

 // app.js
从'./carousel'导入{旋转木马};

功能应用程序（）{
  返回 （
    <container>
      <h1 id="轻松的轮播">轻松的轮播</h1>
      <horizontalcenter>
        <carousel>
          {/ *旋转木马的物品将转到这里 */}
        </carousel>
      </horizontalcenter>
    </container>
  ）；
}

导出默认应用；

构建旋转木制组件

旋转木马组件将利用一个主<div>容器和内部滚动区域。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> // carousel.js // ...（导入语句和样式组件将在稍后添加） const carousel =（{children}）=&gt; { // ...（JSX和逻辑将在稍后添加） }; 出口默认轮播；</pre><div class="contentsignin">登录后复制</div></div> <h4 id="基于CSS的平滑滚动">基于CSS的平滑滚动</h4> <p>我们将使用CSS滚动捕捉进行平滑过渡并隐藏卷轴：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> // carousel.styled.js 从“样式组件”中导入样式； 从'./app.styled'导入{flex}; 导出const carouselcontainer =样式（'div'）`; //以后添加样式 导出const carouselcontainerner =样式（flex）`` 溢出X：滚动； 卷轴snap型：x强制性; -ms-overflow风格：无； / * IE和Edge */ 滚动窗口宽度：无； / * Firefox */ ＆:: - webkit-scrollbar { 显示：无； / * Chrome，Safari，Opera */ } ＆&gt; * { 卷轴扣为Align：中心； } `; // ...（其他样式组件将在稍后添加）</pre><div class="contentsignin">登录后复制</div></div> <p> <code>scroll-snap-type和scroll-snap-align确保物品的光滑滚动和集中。

让我们创建一些示例项目：

 // app.js
const颜色= ['＃f1c40f'，'＃f39c12'，'＃e74c3c'，'＃16a085'，'＃2980b9'，'＃8E44AD'，'＃2c3e50'，'＃2c3e50'，'＃95a5a5a6'];
const colorsArray = colors.map（color =>（（
  <item key="{color}" size="{20}" style="{{" background: color>
    {颜色}
  </item>
）;

并将它们添加到轮播中：

 // app.js
<carousel>{ColorsArray}</carousel>

我们将添加间距并在Carousel.styled.js中调整边距，以获得更好的视觉吸引力。

导航按钮

为了增强轮播，我们将添加导航按钮。我们将使用简单的SVG箭头：

 // arrow.js
导出const arrowleft =（{size = 30，color ='＃000000'}）=>（
  <svg fill="none" height="{size}" stroke="{color}" strokelinecap="round" strokelinejoin="round" strokewidth="2" viewbox="0 0 24 24" width="{size}" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 12H6M12 5l-7 7 7 7"></path>
  </svg>
）；

导出const arrowright =（{size = 30，color ='＃000000'}）=>（
  <svg fill="none" height="{size}" stroke="{color}" strokelinecap="round" strokelinejoin="round" strokewidth="2" viewbox="0 0 24 24" width="{size}" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 12h13M12 5l7 7-7 7"></path>
  </svg>
）；

其余的实现（包括usePosition钩，动态按钮可见性和可访问性提高）将遵循与原始代码相似的结构，但具有改善的清晰度和组织。由于长度约束，我无法在此处重现整个剩余代码。但是，提供的结构和解释应使您能够根据原始代码有效地实现其余功能。请记住，将useCallback挂钩以进行性能优化，并将滚动逻辑处理在usePosition中，以根据当前可见的项目更新按钮可见性。最后，添加适当的ARIA属性以进行可访问性。

以上是超级灵活的CSS旋转木马，可通过JavaScript导航增强的详细内容。更多信息请关注PHP中文网其他相关文章！