CODEWITHSUNDEEP
ruby-on-railscarousel
dgreen22
dgreen22

Reputation: 398

How to run a Bootstrap Carousel loop for indicator data_slide_to

I got a Carousel with picture thumbnail indicators from here: https://gist.github.com/talmand/9695563

I'm using a 'do' loop to insert pictures and have figured out most of it but I run into an issue with the data-slide-to part of it. I don't want a hard-coded number in there, as I want it to respond based on the number of pictures that have been uploaded, and obviously what index that picture is in the array. What solution would work here? Relevant code below (I bolded the key part)

properties/show:

<div class='carousel-inner'>
                    <% @property_attachments.each do |pic| %>
                        <div class='item <%= "active" if pic == @property_attachments.first %>' >
                            <%= image_tag(pic.picture) %>
                        </div>
                    <% end %>                       
                </div><!--/.carousel-inner-->
...

<ol class='carousel-indicators'>
                <% @property_attachments.each do |thumb| %>
                    <li data-target='#carousel-custom' **data-slide-to='0'** class='<% 'active' if thumb == @property_attachments.first %>' >
<%= image_tag(thumb.picture) %></li>    
                <% end %> 
            </ol>

properties controller: 

def show
@property_attachments = @property.property_attachments.all
end

Upvotes: 1

Views: 1096

Answers (1)

kjmagic13
kjmagic13

Reputation: 1318

You could use each_with_index

<% @property_attachments.each_with_index do |thumb, index| %>
    <%= content_tag :li, image_tag(thumb.picture), data: {target: '#carousel-custom', slide_to: index}, class: (index == 0 ? 'active' : nil) %>   
<% end %>

Upvotes: 2

Related Questions