CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstrap
Barna Kovacs
Barna Kovacs

Reputation: 1276

Make first item's class active with Twitter Bootstrap Carousel

I'm struggling to get twitter carousel work properly:

I would like to add the .active class to the first .item div.

  .carousel-inner
    - @photos.each do |photo, index|
      .item{ class: "#{ "active" if index == 0 }"}
        = image_tag(photo.image_url, class: "carousel-photo")

This doesn't work, because it doesn't add the .active class to the first element of the loop. How do I add the .active class only to the first element of the loop?

Upvotes: 3

Views: 2177

Answers (2)

Lesly Revenge
Lesly Revenge

Reputation: 922

I did mind similar but instead I did it like this:

 <% @user.user_images.each_with_index do |info, index| %>
    <div class="item
    <% if index == 0 %>
       active
    <% end %>

    ">

Upvotes: 4

Barna Kovacs
Barna Kovacs

Reputation: 1276

Got the answer:

the .each_with_index method needs to be used here:

  .carousel-inner
    - @photos.each_with_index do |photo, index|
      .item{ class: "#{ "active" if index == 0 }"}
        = image_tag(photo.image_url, class: "carousel-photo")

Upvotes: 7

Related Questions