Bootstrap-Karussell stoppt nach der letzten Folie in Shopify

Question

Ich rebuilding eine bestehende Website mit der Shopify-Plattform und die Integration von Elementen aus Bootstrap, wie das Karussell. Alles funktioniert gut außer dem Karussell, das nach dem letzten nicht auf die erste Rutsche rutscht.

Ich habe folgendes in den Kopf der Shopify Theme-Datei hinzugefügt:

{{ '//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 }} 

Und das ist der Code für das Karussell:

<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> 

Dies funktioniert gut auf der bestehende Website und ich habe nichts anderes geändert, als die css- und js-links zum Shopify-Thema hinzuzufügen, wie oben beschrieben.

Irgendwelche Ideen?

Danke, Ian

Answer 1

Gerade jetzt Ihre Karussellsteuerung (links/rechts Pfeil) Links sind innen "Karussell-Innen" div. Sie müssen sie aus diesem Div entfernen, damit das Karussell ordnungsgemäß funktioniert. Unten ist der korrigierte Code.

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>