title: Slideshow Pro Bootstrap Carousel Stacked Images
body: <p>Does anyone know why my images are stacked in a list instead of appearing in a slideshow?<br>
  I'm using Slideshow Pro with a combination of HTML, CSS, PHP and Javascript from bootstrap. I used the code from <a href="http://forums.slideshowpro.net/viewtopic.php?pid=112251#p112251" rel="nofollow">http://forums.slideshowpro.net/viewtopic.php?pid=112251#p112251</a>. The Javascript wasn't loading properly before because I specified the wrong path but when I changed the path to the correct path, the images are still stacked like a list and the slideshow function isn't working. You can also see the code on <a href="http://jsfiddle.net/anjeline/d3W9x/" rel="nofollow">http://jsfiddle.net/anjeline/d3W9x/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery.js" rel="stylesheet"&gt;&lt;/script&gt;
  &lt;script src="bootstrap/js/bootstrap-transition.js" rel="stylesheet"&gt;&lt;/script&gt;
  &lt;link href="bootstrap/css/bootstrap/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;script src="bootstrap/js/bootstrap.min.js" rel="stylesheet"&gt;&lt;/script&gt;
  &lt;script src="bootstrap/js/bootstrap.js" rel="stylesheet"&gt;&lt;/script&gt;
  &lt;script src="bootstrap/js/bootstrap-carousel.js" rel="stylesheet"&gt;&lt;/script&gt;
  
  
  &lt;!-- a style change to resize small images up--&gt;
  &lt;style&gt;
  .carousel .item img{width:75%;}
  &lt;/style&gt;
  
  &lt;!-- then a little javascript to render the correct responsive image depending on browser width--&gt;
  &lt;script&gt;
  $(document).ready(function() {
  
  $('.carousel').carousel({
  interval: 7000
  });
  
  
  function setImageSrc() {
  var browserWidth = $(window).width();
  var carouselImages = $('.carousel .item img');
  $.each(carouselImages, function(index){
  if(browserWidth &gt;= 480 &amp;&amp; browserWidth &lt;= 768 ){
  $(this).attr('src', $(this).data("tablet-src"));
  }else if(browserWidth &gt; 768 &amp;&amp; browserWidth &lt;= 1280){
  $(this).attr('src', $(this).data("desktop-src"));
  }else if(browserWidth &gt; 1280)
  $(this).attr('src', $(this).data("large-desktop-src"));
  });
  }
  setImageSrc();//init
  $(window).resize(function() {
  setImageSrc();
  });
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Place in the body where you want the carousel and pass in the html id you want to give the carousel for the first parameter and the album id into the 2nd parameter of the createCarousel function.--&gt;
  &lt;?php
  include "my-carousel.php";
  createCarousel("featured", 349);
  ?&gt;
  &lt;/body&gt;
  </code></pre>