Question

我想使用光滑的轮播来显示带有单个元素的菜单以及左右箭头来滚动各种项目：

我的HTML：

<div class="menu menu--sublocalmenu">
  <div class="menu__item"><a href="pagea.html">item a </a></div>
  <div class="menu__item"><a href="pageb.html">item b </a></div>
  ...
  <div class="menu__item menu__item--active"><a href="pagen.html">item n </a></div>
  ...
  <div class="menu__item><a href="pagez.html">item z </a></div>
</div>

我的问题：如何在menu__item--active元素上设置轮播的初始项？

JS代码：

$('.menu--sublocalmenu').slick({
    dots:false,
    arrows:true,
    adaptiveHeight:true,
    infinite:false,
});

Answer 1

这是一个使用slick.js和你提供的html的工作示例。

添加了一些CSS以更容易地显示轮播。

HTML

<div class="container">
    <div class="menu menu--sublocalmenu">
        <div class="menu__item"><a href="pagea.html">item a </a></div>
        <div class="menu__item"><a href="pageb.html">item b </a></div>
        <div class="menu__item menu__item--active"><a href="pagen.html">item n </a></div>
        <div class="menu__item"><a href="pagez.html">item z </a></div>
    </div>
</div>

JS

$(".menu--sublocalmenu").slick({
    dots:false,
    arrows:true,
    adaptiveHeight:true,
    infinite:false
});

CSS - 用于添加样式以更轻松地显示您的轮播

.container {
    margin: 0 auto;
    padding: 40px;
    width: 80%;
    color: #333;
    background: #419be0;
}

.slick-slide {
    text-align: center;
    color: #419be0;
    background: white;
}

or view this working example here on jsfiddle

光滑的轮播作为菜单 - 在具有特定类的项目上设置初始幻灯片

1 个答案: