Question

我在同一页面中有两个自定义幻灯片，但它们无法协同工作，幻灯片显示可以正常工作但另一个幻灯片显示不起作用。我已经阅读了多个幻灯片IN HERE的示例，但我的自定义幻灯片不能像我想要的那样工作。这里MY FIDDLE

这是我的HTML：

<div class="show_mob_product" id="showbrand1">
<ul class="bxslider" id="slider1">
<li>
     <img src="http://lh4.ggpht.com/siuzB88608t3t3_BvoIF60VPtTvc7MfSbX5dBYWhVNsR8hPGZPm3O56CXfvobL83gRyXyhyJ2Hx4--1_EMDFdWO5lJLOjmV8vTiJp6hi" />
    <div>I hope it's work</div>
    <br>
</li>
   <li>
     <img src="http://lh5.ggpht.com/jAOnlgoz-lK2LdYvlYY2xfC3Aa1K1v3DAwb95T5uYRPfwIAxljXl5EXc9DCpitmxbknH4YtE2mCSrZLIRVnJgF3kUxRRR0kXNWifQVRw" />
    <div>I hope it's solved</div>
    <br>
</li>
</ul>

<div class="outside">
<p><span id="slider-prev"></span>  <span id="slider-next"></span>

</p>
</div>
</div>

<div class="show_mob_product" id="showbrand2">
<ul class="bxslider" id="slider1">
<li>
    <img src="http://lh4.ggpht.com/siuzB88608t3t3_BvoIF60VPtTvc7MfSbX5dBYWhVNsR8hPGZPm3O56CXfvobL83gRyXyhyJ2Hx4--1_EMDFdWO5lJLOjmV8vTiJp6hi" />
    <div>I hope it's work</div>
    <br>
</li>
<li>
    <img src="http://lh5.ggpht.com/jAOnlgoz-lK2LdYvlYY2xfC3Aa1K1v3DAwb95T5uYRPfwIAxljXl5EXc9DCpitmxbknH4YtE2mCSrZLIRVnJgF3kUxRRR0kXNWifQVRw" />
    <div>I hope it's solved</div>
    <br>
  </li>
  </ul>

  <div class="outside">
  <p><span id="slider-prev2"></span>  <span id="slider-next2"></span>

  </p>
  </div>
  </div>

和我的javascript：

    $('#slider1').bxSlider({
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    controls: true,
    pager: false,
    nextText: '<img src="http://i.imgur.com/TZDsPC0.png" height="25" width="25"/>',
    prevText: '<img src="http://i.imgur.com/AKjTWvT.png" height="25" width="25"/>'
});
$('#slider2').bxSlider({
    nextSelector: '#slider-next2',
    prevSelector: '#slider-prev2',
    controls: true,
    pager: false,
    nextText: '<img src="http://i.imgur.com/TZDsPC0.png" height="25" width="25"/>',
    prevText: '<img src="http://i.imgur.com/AKjTWvT.png" height="25" width="25"/>'
});

Answer 1

现在你定义了两个ul

并且两个ul id都相同

<ul class="bxslider" id="slider1">

现在这样做

现在定义不同的 ID，首先ul id为<ul class="bxslider" id="slider1">

第二个ul id是<ul class="bxslider" id="slider2">

<强> Demo

Answer 2

有重复的ID

<ul class="bxslider" id="slider1">

BxSlider多个幻灯片

2 个答案: