Question

我正在使用Shopify平台重建现有站点，并集成Bootstrap中的元素，例如轮播。除了旋转木马之外，一切都很顺利，旋转木板在最后一张幻灯片之后无法滑动到第一张幻灯片。

我已将以下内容添加到Shopify主题文件的头部：

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}

{{ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' | stylesheet_tag }}

{{ '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js' | script_tag }}

这是旋转木马的代码：

    <div id="carousel-example" class="carousel slide" data-ride="carousel">

      <!-- Wrapper for slides -->

      <div class="carousel-inner">

        <div class="item slideshow1 active">
            <a href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a href="http://gorilla-foodco.com/shop.html" class="btn btn-brown" role="button">Cane it, cane it...</a> 
                    </div>  
                </div>  
        </div>

        <div class="item slideshow2">
            <a href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a href="http://www.gorilla-foodco.com/shop.html#!/Gorilla-Food-Co-Whole-Dark-Chia-Seeds-400g/p/64622245/category=19687050" class="btn btn-purple" role="button">Hells yeah!</a> 
                    </div>  
                </div>  
        </div>

        <div class="item slideshow3">
            <a href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a href="http://gorilla-foodco.com/shop.html#!/Gorilla-Food-Co-Natural-Almonds-Whole-Raw-800g-Bulk-Pack/p/63540629/category=19687049" class="btn btn-brown" role="button">GIMME SOME.</a> 
                    </div>  
                </div>  
        </div>

        <div class="item slideshow4">
            <a href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a href="http://gorilla-foodco.com/shop.html#!/Oats-Flours-&-Grains/c/19687048/offset=0&sort=priceAsc" class="btn btn-gold" role="button">Roll that shiz...</a> 
                    </div>  
                </div>  
        </div>

        <div class="item slideshow5">
            <a href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a href="http://gorilla-foodco.com/downloads/Gorilla-Food-Co-Figure-Out-The-Flames-Wallpaper-HD.jpg" class="btn btn-orange" role="button">Hey man, it's free! </a> 
                    </div>  
                </div>  
        </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example" data-slide="prev">
      </a>
      <a class="right carousel-control" href="#carousel-example" data-slide="next">
      </a>
    </div>

这在现有网站上运行正常，除了如上所述添加到Shopify主题的css和js链接之外，我还没有改变任何内容。

有什么想法吗？

谢谢，伊恩

Answer 1

现在你的旋转木马控件（左/右箭头）链接在“carousel-inner”div内。您需要将它们移出该div以使转盘正常工作。以下是更正后的代码。

JSFiddle：https://jsfiddle.net/52e07p91/2/

<div id="carousel-example" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item slideshow1 active">
      <a href="#">
      </a>
      <div id="caption-container">
        <a href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a href="#">
          </a><a href="http://gorilla-foodco.com/shop.html" class="btn btn-brown" role="button">Cane it, cane it...</a>
        </div>
      </div>
    </div>

    <div class="item slideshow2">
      <a href="#">
      </a>
      <div id="caption-container">
        <a href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a href="#">
          </a><a href="http://www.gorilla-foodco.com/shop.html#!/Gorilla-Food-Co-Whole-Dark-Chia-Seeds-400g/p/64622245/category=19687050" class="btn btn-purple" role="button">Hells yeah!</a>
        </div>
      </div>
    </div>

    <div class="item slideshow3">
      <a href="#">
      </a>
      <div id="caption-container">
        <a href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a href="#">
          </a><a href="http://gorilla-foodco.com/shop.html#!/Gorilla-Food-Co-Natural-Almonds-Whole-Raw-800g-Bulk-Pack/p/63540629/category=19687049" class="btn btn-brown" role="button">GIMME SOME.</a>
        </div>
      </div>
    </div>

    <div class="item slideshow4">
      <a href="#">
      </a>
      <div id="caption-container">
        <a href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a href="#">
          </a><a href="http://gorilla-foodco.com/shop.html#!/Oats-Flours-&amp;-Grains/c/19687048/offset=0&amp;sort=priceAsc" class="btn btn-gold" role="button">Roll that shiz...</a>
        </div>
      </div>
    </div>

    <div class="item slideshow5">
      <a href="#">
      </a>
      <div id="caption-container">
        <a href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a href="#">
          </a><a href="http://gorilla-foodco.com/downloads/Gorilla-Food-Co-Figure-Out-The-Flames-Wallpaper-HD.jpg" class="btn btn-orange hoverZoomLink" role="button">Hey man, it's free! </a>
        </div>
      </div>
    </div>


  </div>
  <!-- Controls -->
  <a class="carousel-control active" href="#carousel-example" data-slide="prev">
  </a>
  <a class="right carousel-control" href="#carousel-example" data-slide="next">
  </a>
  <!-- end of carousel -->
</div>

在Shopify中最后一张幻灯片后，Bootstrap轮播停止

1 个答案: