Bootstrap carousel prev 按钮在移动版本中不起作用

Question

我已经使用引导轮播，它在桌面版中可以正常工作，但是在移动版中，当我们单击上一个按钮时，下一个按钮可以工作，请任何人帮助我。特此分享代码 enter image description here

先生，请检查链接 网址：http://www.josephgroup.ae/fascia-signs.php

enter code here

 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <!-- <li data-target="#myCarousel" data-slide-to="4"></li> -->
            <li data-target="#myCarousel" data-slide-to="4"></li>
            <li data-target="#myCarousel" data-slide-to="5"></li>
            <li data-target="#myCarousel" data-slide-to="6"></li>
            <li data-target="#myCarousel" data-slide-to="7"></li>
            <li data-target="#myCarousel" data-slide-to="8"></li>
            <!-- <li data-target="#myCarousel" data-slide-to="9"></li> -->
            <li data-target="#myCarousel" data-slide-to="9"></li>
            <li data-target="#myCarousel" data-slide-to="10"></li>
            <li data-target="#myCarousel" data-slide-to="11"></li>
            <li data-target="#myCarousel" data-slide-to="12"></li>
            <li data-target="#myCarousel" data-slide-to="13"></li>
            <li data-target="#myCarousel" data-slide-to="14"></li>
            <li data-target="#myCarousel" data-slide-to="15"></li>
            <li data-target="#myCarousel" data-slide-to="16"></li>
            <li data-target="#myCarousel" data-slide-to="17"></li>
            <li data-target="#myCarousel" data-slide-to="18"></li>
            <li data-target="#myCarousel" data-slide-to="19"></li>
            <li data-target="#myCarousel" data-slide-to="20"></li>
            <li data-target="#myCarousel" data-slide-to="21"></li>
            <li data-target="#myCarousel" data-slide-to="22"></li>
            <li data-target="#myCarousel" data-slide-to="23"></li>
            <li data-target="#myCarousel" data-slide-to="24"></li>
            <li data-target="#myCarousel" data-slide-to="25"></li>
            <li data-target="#myCarousel" data-slide-to="26"></li>
            <li data-target="#myCarousel" data-slide-to="27"></li>
            <li data-target="#myCarousel" data-slide-to="28"></li>
            <li data-target="#myCarousel" data-slide-to="29"></li>
            <li data-target="#myCarousel" data-slide-to="30"></li>
            <li data-target="#myCarousel" data-slide-to="31"></li>
            <li data-target="#myCarousel" data-slide-to="32"></li>
            <li data-target="#myCarousel" data-slide-to="33"></li>
            <li data-target="#myCarousel" data-slide-to="34"></li>
            <li data-target="#myCarousel" data-slide-to="35"></li>
            <li data-target="#myCarousel" data-slide-to="36"></li>
            <li data-target="#myCarousel" data-slide-to="37"></li>
            <li data-target="#myCarousel" data-slide-to="38"></li>
            <li data-target="#myCarousel" data-slide-to="39"></li>
            <li data-target="#myCarousel" data-slide-to="40"></li>
            <li data-target="#myCarousel" data-slide-to="41"></li>
            <li data-target="#myCarousel" data-slide-to="42"></li>
            <li data-target="#myCarousel" data-slide-to="43"></li>
            <li data-target="#myCarousel" data-slide-to="44"></li>
            <li data-target="#myCarousel" data-slide-to="45"></li>
            <li data-target="#myCarousel" data-slide-to="46"></li>
            <li data-target="#myCarousel" data-slide-to="47"></li>
            <li data-target="#myCarousel" data-slide-to="48"></li>
            <li data-target="#myCarousel" data-slide-to="49"></li>
            <li data-target="#myCarousel" data-slide-to="50"></li>
            <li data-target="#myCarousel" data-slide-to="51"></li>
            <li data-target="#myCarousel" data-slide-to="52"></li>
            <li data-target="#myCarousel" data-slide-to="53"></li>
            <li data-target="#myCarousel" data-slide-to="54"></li>
            <li data-target="#myCarousel" data-slide-to="55"></li>
            <li data-target="#myCarousel" data-slide-to="56"></li>
            <li data-target="#myCarousel" data-slide-to="57"></li>
          </ol><!-- indicator -->
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="images/product/detail/signage/fascia-signs/1.jpg" alt="" class="img-responsive" />
               <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>

            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/2.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/3.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/4.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <!-- <div class="item">
              <img src="images/product/detail/signage/fascia-signs/5.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div> -->
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/6.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/7.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/8.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/9.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/10.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <!-- <div class="item">
              <img src="images/product/detail/signage/fascia-signs/11.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div> -->
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/12.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/13.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/14.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/15.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/16.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/17.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/1a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/2a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/3a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/4a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/5a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/6a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/7a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/8a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/9a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/10a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/11a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/12a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/13a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/14a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/15a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/16a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/17a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/18a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/19a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/20a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/21a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/22a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/23a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/24a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/25a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/26a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/27a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/28a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/29a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/30a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/31a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/32a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/33a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/34a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/35a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/36a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/37a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/38a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/39a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/40a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/41a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/42a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>
            <div class="item">
              <img src="images/product/detail/signage/fascia-signs/43a.jpg" alt="" class="img-responsive" />
              <div class="carousel-caption">
                <p>Revolutionize your business</p>
              </div>
            </div>                            
          </div>
          <!-- Left and right controls -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev" role="button" onclick="$('#myCarousel').carousel('prev')">
            <span class="glyphicon glyphicon-chevron-left"  aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next" role="button" onclick="$('#myCarousel').carousel('next')">
            <span class="glyphicon glyphicon-chevron-right"  aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>              
        </div><!--mycarousel  -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

enter image description here

标题

Answer 1

我找到了解决上述问题 carousel-control right 类宽度覆盖 carousel-control left 类的解决方案，这就是 prev 按钮不起作用的原因。