html - 网站的水平时间表栏

Question

我在个人网站上工作，到目前为止，一切进展顺利。我用基本布局和类似的东西设置了页面。现在我试图让它看起来更专业。我每个月有多个周末参加锦标赛。 (是的，我说的是碗，是的，我确实认为这是一项运动)我想做的是在顶部放置一个时间表类型的栏。 (可以通过单击这篇文章中的链接找到示例)问题是我找不到任何关于如何执行此操作的教程，因为我真的不知道这个功能叫什么。我尝试搜索的所有内容都显示了水平导航/滚动条。任何人都可以给我指点教程或给我一个起点，让我在我的网站上运行这样的东西吗？

Answer 1

这实际上是一个 slider ，一次显示 15 张幻灯片。

BX SLIDER - jQuery slider

上面包含的 slider 有很多选项可以让你自定义它的工作方式，例如

• maxSlides - 在给定时间显示的幻灯片总数(您设置为 15)
• moveSlides - 更改时要移动的幻灯片数量(您设置为 1)。

示例JS

$('.schedule').bxSlider({
   maxSlides: 15,
   minSlides: 15,       
   moveSlides: 1,
   autoStart: false
});

您的 HTML、日程表和所有样式都包含在列表中。

<ul class="schedule">
    <li>January 15th - Match</li>
    <li>January 22nd - Match</li>
    <li>January 23rd - Match</li>
</ul>

等等等等