2

I'm trying to create a carousel of images in html5 being sourced via the paperclip gem in Ruby on Rails. I've managed to create a successful carousel where I use a static # of stock images (5) but when I try to iterate through images, the format sticks and the interval works but the 'prev' & 'next' buttons do not work.

I'm pretty sure my jquery links are all setup correctly considering my static carousel works, but I can't figure out the iteration one. I've included both below. Any help would be appreciated, thanks !

And fyi - I've researched a bunch of posts like this one and none seem to answer my specific issue - Bootstrap Carousel Transitions and Prev/Next Buttons Not Working

Code where buttons aren't working:

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

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="active item">
                 <%= image_tag("Chess.png", :alt => "chess") %>
              </div>
              <% @outings.each do |outing| %>
                  <div class="item">
                    <%= image_tag outing.image.url(:medium) %>
                  </div>
              <% end %>
            </div>

            <!-- Controls -->
              <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              </a>
              <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              </a>
          </div>

Code that is working:

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

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <%= image_tag("Chess.png", :alt => "chess") %>
              <div class="carousel-caption">
                <h3>First Image</h3>
              </div>
            </div>
            <div class="item">
              <%= image_tag("cocktail.png", :alt => "cocktail") %>
              <div class="carousel-caption">
                <h3>Second Image</h3>
              </div>
            </div>
            <div class="item">
              <%= image_tag("concert.png", :alt => "concert") %>
              <div class="carousel-caption">
                <h3>Third Image</h3>
              </div>
            </div>
            <div class="item">
              <%= image_tag("football.png", :alt => "football") %>
              <div class="carousel-caption">
                <h3>Fourth Image</h3>
              </div>
            </div>
            <div class="item">
              <%= image_tag("Coffee.png", :alt => "coffee") %>
              <div class="carousel-caption">
                <h3>Fifth Image</h3>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          </a>
          <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          </a>
        </div>

Coffee Javascript

$('.left').click ->
  $('#myCarousel').carousel 'prev'
  return
$('.right').click ->
 $('#myCarousel').carousel 'next'
 return
$('.carousel').carousel
  interval: 60
  pause: 'hover'
  wrap: true
Community
  • 1
  • 1
Senator
  • 73
  • 9

2 Answers2

0

notice in your loop, you're calling class item (the not working one)

<% @outings.each do |outing| %>
  <div class="item">
    <%= image_tag outing.image.url(:medium) %>
  </div>
<% end %>

then notice in the working code

<div class="item active">
  <%= image_tag("Chess.png", :alt => "chess") %>
  <div class="carousel-caption">
    <h3>First Image</h3>
  </div>
</div>

The first one has the "active" class, bootstrap carousel require atleast one class "item" to be "active".

So in your code try to add the class "active" in the first loop.

<% @outings.each_with_index do |outing, index| %>
  <div class="item <%= index == 0 ? 'active' : '' %>">
    <%= image_tag outing.image.url(:medium) %>
  </div>
<% end %>
Christian Angel Galamay
  • 109
  • 1
  • 6
  • Thanks Christian, I do like that setup to allow an 'active' item to come up first in my iteration so i can remove the single active item (chess.png in my example) but it results in the exact same issue as before (images will scroll through based on interval but the carousel buttons still don't work). Any other thoughts? – Senator Apr 26 '16 at 22:21
  • Well, that's weird, I try to create same scenario using your code (I just create an Outing table with an image field and create a seed file to upload image) and it works fine in mine,, I use carrierwave gem for my image upload. The only difference is I convert your coffeescript to javascript... – Christian Angel Galamay Apr 27 '16 at 01:26
  • Humf, do you think it has something to do with using coffee over java? In my application view i have this link for javascript, is there a similar script i need to include for coffeescript? – Senator Apr 27 '16 at 02:53
  • Actually no, I tried it with coffee and it also work. By the way, did you use the bootstrap gem? https://github.com/twbs/bootstrap-sass if you use it, no need to add script of bootstap in view – Christian Angel Galamay Apr 27 '16 at 03:08
  • I wonder if my problem is there somewhere, I had trouble getting the carousel to work at all initially and some thread I read suggested adding the scripts found at http://getbootstrap.com/getting-started/ under the Bootstrap CDN section. I just tried removing those scripts and adding in the bootstrap-sass gem and the carousels (and other bootstrap functionality I have setup) both stopped working) I'm very new to all of this, so I wonder if my gems aren't setup correctly (or I have too many?) – Senator Apr 27 '16 at 03:54
  • Kept at this and finally figured it out! Because I had more than one carousel, I needed multiple carousel ID's per this http://stackoverflow.com/questions/27047717/multiple-bootstrap-carousels-on-one-page-can-only-control-one – Senator May 02 '16 at 02:19
  • I do have a followup question, how do i create a loop within the "data-slide-to" that would count up to the # of images I have uploaded? example:
    1. <% x = @outings.count, for outingimagecount in 1..x do %>
    2. <% end %>
    – Senator May 02 '16 at 02:21
0

Kept at this and finally figured it out! Because I had more than one carousel, I needed multiple carousel ID's per this stackoverflow Q&A: Multiple bootstrap carousels on one page, can only control one

Community
  • 1
  • 1
Senator
  • 73
  • 9