javascript - Dynamically Adding images to Bootstrap Carousel in Rails 4 app -
i'm using active admin upload images app, working fine. want uploaded images displayed in bootstrap carrousel. lack of experience using rails , javascript limits me result want.
the javascript console throws error :
carousel.self-e47323f….js?body=1:148 uncaught typeerror: cannot read property 'offsetwidth' of undefined(…) carousel.slide @ carousel.self-e47323f….js?body=1:148 carousel.next @ carousel.self-e47323f….js?body=1:110 (anonymous function) @ carousel.self-e47323f….js?body=1:186 each @ jquery.self-bd7ddd3….js?body=1:371 each @ jquery.self-bd7ddd3….js?body=1:138 plugin @ carousel.self-e47323f….js?body=1:178 clickhandler @ carousel.self-e47323f….js?body=1:218 dispatch @ jquery.self-bd7ddd3….js?body=1:5227 elemdata.handle @ jquery.self-bd7ddd3….js?body=1:4879
edit looked @ possible duplicate, can see how might possible duplicate, i´m not sure on how integrate ruby loop
into javascript
.
can advise me please. code below
edited updated code
<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> </ol> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <% @product.photos.each_with_index |photo, index| %> <div class="item #{"active" if index.zero? }"> <%= image_tag(photo.image.url(:large)) %> </div> <% end %> ... </div> <!-- controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> <span class="sr-only">next</span> </a> </div> <script type="text/javascript"> $('.carousel').carousel({ interval: 2000 }) </script>
probably missing class 'active' or class 'active' added items. add class 'active' photo want show first.
below code add class 'active' first image.
<% @product.photos.each_with_index |photo, index| %> <div class="item #{"active" if index.zero? }"> <%= image_tag(photo.image.url(:large)) %> </div> <% end %>
also please check javascript errors on page.
Comments
Post a Comment