CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapruby-on-rails-4carousel
Kohl
Kohl

Reputation: 87

Twitter Bootstrap Rails Carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active">  </li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

     <!-- Wrapper for slides -->
     <div class="carousel-inner row homepage_nav">
      <% @carousel_article.each do |carousel|%>
        <div class="item active col-md-8">
          <% if carousel.photos.exists? %>
            <% carousel.photos.first do |p| %>
              <%= image_tag p.image.url(:medium), :class=> "img-responsive" %>
            <% end %>
          <% else %>
            <img src="http://placehold.it/400x300" class="img-responsive">
          <% end %>
        <div class="carousel-caption">
          <%= carousel.title %>
        </div>
      </div>
    <% end %>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <!--span class="glyphicon glyphicon-chevron-left"></span-->
    <div class="col-xs-2 control">
         <img src="<%= image_url "left_carousel.png" %>" class="img-responsive">
    </div>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <!--span class="glyphicon glyphicon-chevron-right"></span-->
    <div class="col-xs-2 control">
        <img src="<%= image_url "right_carousel.png" %>" class="img-responsive">
    </div>
  </a>
</div>

I am trying to show the first photo for each article in one pane of the carousel. As it stands, the entire list is showing and its fugly. I know its a problem somewhere in my loop. Help please!!!

In my controller:

@carousel_article= Article.all.order(created_at: :desc)

Upvotes: 0

Views: 1479

Answers (2)

moonfly
moonfly

Reputation: 1820

You can also do it w/o Javascript (note each -> each_with_index and the introduction of list_pos)

<% @carousel_article.each_with_index do |carousel,list_pos|%> 
    <% photo_class = "item col-md-8" + (list_pos == 0 ? " active" : "") %>
    <div class=<%=photo_class%>>
    ...etc...

Upvotes: 0

Christina
Christina

Reputation: 34652

The first item is active the rest are not. This is how I do this in a situation that's similar:

 $(document).ready(function() {
    $('#carousel-example-generic .carousel-inner > .item:first').addClass('active');
 });

Is there a reason why you're using #carousel-example-generic? Did you style it this way? I find it best to rename them from the examples, it just looks more pro, ya know...

Upvotes: 1

Related Questions