Question

卓悦！

我需要帮助来使这些LightSlider滑块正常工作。

滑块似乎与下面列出的JQuery函数有冲突，但是我需要帮助。

它们仅在网页的第一个标签上起作用，而不在其他标签上起作用。而且，“标签”是指页面内的主要内容，这些内容会根据用户的选择而变化。例如，如果用户选择“气泡”，则整个页面应显示气泡。包括气泡滑块（我的问题所在）。如果用户选择“树”，则主要内容应更改为树的滑块。

对于大多数项目，LightSlider插件可以完美运行。但是，当我尝试在同一页面上放置多个滑块时，选项卡2和3上的滑块会断裂并且根本不显示...在这种情况下，滑块仅显示在第一个选项卡上。并且，它无法为其他选项卡加载。我很想找出原因，

下面我有一个简化的版本，但是您可以在CodePen上查看该项目。

此外，当我在Google Chrome上“检查元素”以查看发生了什么时，有时会触发滑块显示在选项卡2/3上。打开Google Inspect框的简单功能，可以显示页内滑块。太奇怪了，我无法解释。

我觉得这是LightSlider插件本身的问题，而不是我的代码中的错误。但是，我也希望您能帮助我诊断正在发生的事情，以便与开发人员一起解决和/或提出问题。

JS：

// LightSlider
$('.slider-3UP').lightSlider({
  item: 3
}); 

// Tabs
$(".category-button").click(function() {
  $(".category-button").removeClass("active");
  $(this).addClass("active");
});
$(".category-button:eq(0)").addClass('active')
var $categoryButton = $(".category-button");
var $pageContent = $(".page-content");
$(".page-content")
  .hide()
  .first()
  .show();
$categoryButton.on("click", function(e) {
var $category = $(this).data("target");
  $pageContent
    .hide()
    .find('img').hide()
    .end()
    .filter("." + $category)
    .show()
    .find('img').fadeIn();
});

HTML：

<div class="container">
  <h5 class="category-button" data-target="bubbles">Bubbles</h5>
  <h5 class="category-button" data-target="trees">Trees</h5>
  <h5 class="category-button" data-target="ocean">Ocean</h5>
</div>

<!-- BUBBLES TAB -->
<div class="container page-content bubbles">
    <ul class="slider-3UP">
      <li>
        <img alt="Bubbles" width="100%" src="http://via.placeholder.com/350x150"> 
      </li>
      <!-- MORE <li> SLIDES CAN GO HERE -->
    </ul>
</div>

<!-- TREES TAB  -->
<div class="container page-content trees">
    <ul class="slider-3UP">
      <li>
        <img alt="Trees" width="100%" src="http://via.placeholder.com/350x150">
      </li>
      <!-- MORE <li> SLIDES CAN GO HERE -->
    </ul>
</div>

<!-- OCEAN TAB -->
<div class="container page-content ocean">
    <ul class="slider-3UP">
      <li>
        <img alt="Ocean" width="100%"  src="http://via.placeholder.com/350x150">
      </li>      
      <!-- MORE <li> SLIDES CAN GO HERE -->
    </ul>
</div>

CSS：

.category-button {
  background: #0A1D29;
  padding:50px;
  color:white;
  text-transform:uppercase;
  font-size:16px;
}
.active {
  background: #40838F;
}

页内标签的Lightslider问题

0 个答案: