单页多Unslider滑块异常：导航点可用，prev/next按钮失效

看起来你遇到的问题主要有两个核心原因，咱们一步步来解决：

问题分析 #

1. 你关闭了默认箭头按钮：代码里设置了arrows: false，这会让Unslider不自动生成内置的上一页/下一页按钮，自然没有对应的交互元素。
2. 多个滑块实例的事件绑定逻辑不对：直接给所有.my-slider绑定点击事件，会导致点击任何滑块都会触发所有滑块的切换，而且这也不是按钮控制的正确方式。

方案一：使用Unslider默认箭头按钮 #

如果你想用插件自带的箭头按钮，只需要修改初始化配置，并添加基础样式让按钮显示出来：

修改JS代码 #

jQuery(document).ready(function($) {
  // 给每个滑块实例启用默认箭头
  $('.my-slider').unslider({
    arrows: true // 把false改成true，启用默认箭头
  });
});

添加CSS样式（让按钮可见） #

默认的箭头按钮可能会因为没有样式而隐藏，添加以下CSS让它们显示在合适位置：

/* 滑块容器需要相对定位，让箭头基于它定位 */
.my-slider {
  position: relative;
}

/* 通用箭头样式 */
.unslider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  z-index: 10;
  font-size: 16px;
}

/* 上一页按钮定位 */
.unslider-arrow.prev {
  left: 10px;
}

/* 下一页按钮定位 */
.unslider-arrow.next {
  right: 10px;
}

/* 鼠标悬停效果 */
.unslider-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}

方案二：自定义前后按钮（更灵活） #

如果想自己设计按钮样式和位置，可以按以下步骤操作：

修改HTML结构（给每个滑块添加对应按钮） #

<!-- 每个滑块用容器包裹，方便关联按钮 -->
<div class="slider-wrapper">
  <button class="custom-prev">← 上一页</button>
  <div class="my-slider">
    <ul>
      <li><img class="img-pad" src="img/cannes-bridge.jpg" alt=""></li>
      <li><!-- 第二个滑块内容 --></li>
    </ul>
  </div>
  <button class="custom-next">下一页 →</button>
</div>

<!-- 第二个滑块同理 -->
<div class="slider-wrapper">
  <button class="custom-prev">← 上一页</button>
  <div class="my-slider">
    <ul>
      <li><!-- 滑块内容 --></li>
      <li><!-- 滑块内容 --></li>
    </ul>
  </div>
  <button class="custom-next">下一页 →</button>
</div>

修改JS代码（绑定按钮到对应滑块） #

因为有多个滑块实例，需要逐个初始化并给对应的按钮绑定事件：

jQuery(document).ready(function($) {
  // 遍历每个滑块实例
  $('.my-slider').each(function() {
    var $currentSlider = $(this);
    // 初始化当前滑块，关闭默认箭头
    var sliderInstance = $currentSlider.unslider({
      arrows: false
    });
    
    // 找到当前滑块对应的前后按钮（基于父容器查找）
    var $prevBtn = $currentSlider.closest('.slider-wrapper').find('.custom-prev');
    var $nextBtn = $currentSlider.closest('.slider-wrapper').find('.custom-next');
    
    // 绑定上一页事件
    $prevBtn.on('click', function(e) {
      e.preventDefault();
      sliderInstance.unslider('prev');
    });
    
    // 绑定下一页事件
    $nextBtn.on('click', function(e) {
      e.preventDefault();
      sliderInstance.unslider('next');
    });
  });
});

自定义按钮样式（示例） #

根据你的需求调整样式：

.slider-wrapper {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.custom-prev, .custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #2c3e50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.custom-prev {
  left: -50px;
}

.custom-next {
  right: -50px;
}

.custom-prev:hover, .custom-next:hover {
  background: #34495e;
}

这样修改后，你的前后按钮就能正常控制对应的滑块切换了，导航点也能保持原来的功能。

内容的提问来源于stack exchange，提问作者NiceShoes