javascript - BxSlider 多个幻灯片

Question

我在同一页面上有 2 个自定义幻灯片，但它们不能一起工作，一个幻灯片可以工作，但另一个幻灯片不能。我已经阅读了多张幻灯片的示例 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

HI 现在你定义了两个 ul

两个ul id是一样的

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

现在做这个

现在定义不同的 id first ul id is <ul class="bxslider" id="slider1">

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

Demo