Ad

Bootstrap Carousel Stops After Last Slide In Shopify

I'm re-building an existing site using the Shopify platform, and integrating elements from Bootstrap, such as the carousel. Everything works pretty well except the carousel, which is failing to slide to the first slide, after the last one.

I have added the following into the head of the Shopify theme file:

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

And this is the code for the carousel:

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

      <!-- Wrapper for slides -->

      <div class="carousel-inner">

        <div class="item slideshow1 active">
            <a target="_blank" rel="nofollow noreferrer" href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
                <div id="caption-container">
                    <div id="carousel-caption" class="slide-right">                     
            <a target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="#carousel-example" data-slide="prev">
      </a>
      <a class="right carousel-control" target="_blank" rel="nofollow noreferrer" href="#carousel-example" data-slide="next">
      </a>
    </div>

This works fine on the existing site and I haven't changed anything other than adding the css and js links to the Shopify theme as described above.

Any ideas?

Thanks, Ian

Ad

Answer

Right now your carousel control (left / right arrow ) links are inside "carousel-inner" div. You need to move them out of that div to make the carousel work properly. Below is corrected 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 target="_blank" rel="nofollow noreferrer" href="#">
      </a>
      <div id="caption-container">
        <a target="_blank" rel="nofollow noreferrer" href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a target="_blank" rel="nofollow noreferrer" href="#">
          </a><a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
      </a>
      <div id="caption-container">
        <a target="_blank" rel="nofollow noreferrer" href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a target="_blank" rel="nofollow noreferrer" href="#">
          </a><a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
      </a>
      <div id="caption-container">
        <a target="_blank" rel="nofollow noreferrer" href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a target="_blank" rel="nofollow noreferrer" href="#">
          </a><a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
      </a>
      <div id="caption-container">
        <a target="_blank" rel="nofollow noreferrer" href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a target="_blank" rel="nofollow noreferrer" href="#">
          </a><a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#">
      </a>
      <div id="caption-container">
        <a target="_blank" rel="nofollow noreferrer" href="#">
        </a>
        <div id="carousel-caption" class="slide-right">
          <a target="_blank" rel="nofollow noreferrer" href="#">
          </a><a target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="#carousel-example" data-slide="prev">
  </a>
  <a class="right carousel-control" target="_blank" rel="nofollow noreferrer" href="#carousel-example" data-slide="next">
  </a>
  <!-- end of carousel -->
</div>
Ad
source: stackoverflow.com
Ad