2017-07-09 49 views
0

Bootstrap傳送帶在Stopify後停止使用Shopify平臺重新構建現有網站,並集成來自Bootstrap的元素(如傳送帶)。除了最後一個之後沒有滑動到第一張幻燈片的旋轉木馬,一切都運行得很好。Shopify

我加入以下到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鏈接之外,我沒有改變任何東西。

任何想法?

謝謝,伊恩

+0

嗨,你能不能給我們鏈接到您的shopify商店,你要安裝的旋轉木馬。確保它沒有密碼保護。這樣我就能夠正確地檢查問題。現在我的猜測是,您將第一個孩子添加到「主動」類中,這是不必要的。 Regards –

+0

嗨,謝謝你的回覆。當然,鏈接是:https://gorilla-food-co.myshopify.com我曾嘗試刪除「主動」類,但是這導致傳送帶完全停止工作。謝謝。 – Ian

回答

0

現在您的旋轉木馬控制(左/右箭頭)鏈接裏面的「旋轉木馬內」分區。您需要將它們移出該分區以使旋轉木馬正常工作。以下是更正的代碼。

的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> 
+0

這太棒了,現在完美了。非常感謝你的幫助! – Ian