title: how to integrate bootstrap carousel in wordpress
body: <p>I have a static carousel and want to integrate it to wordpress without any plugin.
  my question is how to append my images folder, which has all carousel images inside, to the wordpress dynamically.</p>
  
  <pre><code>&lt;?php if(is_front_page()){
      $i=0; 
      query_posts('showposts=3&amp;post_type=post');   
  ?&gt;
  &lt;section id="main-slider" class="no-margin"&gt;
      &lt;div class="carousel slide" data-ride="carousel"&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#main-slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#main-slider" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#main-slider" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="carousel-inner"&gt;
          &lt;?php if (have_posts()): while(have_posts()): the_post(); $i++; ?&gt;
              &lt;?php 
                 if(has_post_thumbnail())
                      $url=wp_get_attachment_url(get_post_thumbnail_id());
               ?&gt;
              &lt;?php if($i==1){?&gt;
              &lt;div class="item active" style="background-image: url(&lt;?php echo $url; ?&gt;)"&gt;
              &lt;?php }else{?&gt;
                  &lt;div class="item" style="background-image: url(&lt;?php echo $url; ?&gt;)"&gt;
                      &lt;?php }?&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row slide-margin"&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;div class="carousel-content"&gt;
                                  &lt;h1 class="animation animated-item-1"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
                                  &lt;h2 class="animation animated-item-2"&gt;Fake text&lt;/h2&gt; 
                                  &lt;a class="btn-slide animation animated-item-3" href="&lt;?php the_permalink(); ?&gt;"&gt;Read More&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="col-sm-6 hidden-xs animation animated-item-4"&gt;
                              &lt;div class="slider-img"&gt;
                                  &lt;img src="images/slider/img1.png" class="img-responsive"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.item--&gt;
              &lt;?php endwhile; endif; ?&gt;
          &lt;/div&gt;&lt;!--/.carousel-inner--&gt;
      &lt;/div&gt;&lt;!--/.carousel--&gt;
      &lt;a class="prev hidden-xs" href="#main-slider" data-slide="prev"&gt;
          &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class="next hidden-xs" href="#main-slider" data-slide="next"&gt;
          &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/section&gt;&lt;!--/#main-slider--&gt;
  &lt;?php } ?&gt;&lt;?php wp_reset_query(); ?&gt;
  </code></pre>
  
  <p>As you know, the <code>$url</code> has not any value.
  how can I add/remove images to carousel dynamically.</p>