Bootstrap carousel not working in Heroku app - ruby-on-rails

I am using bootstrap from a CDN with my rails app. Most of the styling works except for the carousel on the home page. It works fine in development but not at Heroku. I don't know if this is relevant but I have defined this route in routes.rb: root "home#index" which displays index.html.erb via the HomeController. The first image in the carousel is loaded but that is it. It has no functionality. Right now I have no bootstrap gems in the gem file which I will try if necessary. I just wanted to see if anyone has seen this issue before and knows what to do. I think this file is OK since it works in development but here is index.html.erb:
<div id="myCarousel" class="carousel slide img-rounded" 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("nicholson2.jpg", alt:"nicholson", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("marilyn2.jpg", alt:"marilyn", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("pacino2.jpg", alt:"pacino", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("lily.jpg", alt:"lily", class: "img-rounded") %>
</div>
<div class="item">
<%= image_tag("deniro2.jpg", alt:"deniro", class: "img-rounded") %>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I resolved this by using https: instead of http: when linking to external resources. It works in development but evidently heroku does not allow it.

I had the same issue, in my case i had to remove the //=require jquery_ujs from the application.js file (assets/javascripts/application.js). Hopefully it will resolve the issue. :)

Related

Bootstrap carousel in rails 6

I'm trying to create a bootstrap carousel for the homepage of a blog that scrolls through the last three articles from the database. I got it working for a carousel that advances automatically but I wanted to have the next and previous buttons but when I try in that one it does not work. I can get the first which is the last article in the table to display but it will not advance.
I couldn't figure out out a better way to get the last three articles so here is ow I did it. I am definitely open to suggestions to make this better. My home action for the pages_controller is:
def home
#articles = Article.last(3).reverse
#art1 = #articles.pop
#art2 = #articles.pop
#art3 = #articles.pop
end
Now the carousel:
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#art3.image.url, width: '100%') %>
<div class="carousel-caption d-none d-md-block">
<h5><%= #art3.title %></h5>
</div>
</div>
<div class="carousel-item">
<%= image_tag(#art2.image.url, width: '100%') %>
<div class="carousel-caption d-none d-md-block">
<h5><%= #art2.title %></h5>
</div>
</div>
<div class="carousel-item">
<%= image_tag(#art1.image.url, width: '100%') %>
<div class="carousel-caption d-none d-md-block">
<h5><%= #art1.title %></h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
This works in the works in a version of the carousel that does not have buttons but advances automatically.

Bootstrap carousel chevron button and slides are not working

I've pasted my code for a bootstrap carousel below. It doesn't work, but I'm not sure why.
<div id="carouseldiv" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouseldiv" data-slide-to="0" class="active"></li>
<li data-target="#carouseldiv" data-slide-to="1"></li>
<li data-target="#carouseldiv" data-slide-to="2"></li>
<li data-target="#carouseldiv" data-slide-to="3"></li>
<li data-target="#carouseldiv" data-slide-to="4"></li>
<li data-target="#carouseldiv" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/4.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/5.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
<div class="item">
<img src="img/6.jpg" alt="1">
<div class="carousel-caption">
<p>PUBG : King of all games</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carouseldiv" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouseldiv" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
I compared your code snippet to the one on bootstrap's website.
It looks like you're not using the classes on your div's and spans that Bootstrap needs.
For example you have <div class="item"> when the Boostrap documentation shows <div class="carousel-item">. I also noticed you using glyphicon chevron's when you should be using <span class="carousel-control-prev-icon" aria-hidden="true"></span> and <span class="carousel-control-next-icon" aria-hidden="true"></span>.
Basically, after verifying that Bootstrap is correctly imported, you're going to need to go through the Bootstrap documentation code snippet and your own line-by-line to make sure the CSS classes used are the same. You'll probably find it helpful to start with a 2-slide carousel, rather than a 6-slide carousel.
You didn't post what version of Bootstrap you're using, so I assumed version 4.1 (the latest stable version as I'm writing this).

Bootstrap rails drop down navbar stopped working

The collapsed navbar for mobile versions will not open. The website is www.insaka.org. This is the navbar code. I could have sworn it was working last time I checked it, but now it is not. Any ideas?
<div class="container">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<%= render 'layouts/navigation_links' %>
<% render 'layouts/nav_links_for_auth' %>
</ul>
<div>
Donate
</div>
<div>
<img class="featurette-image img-fluid mx-auto img-responsive max-width:25px height:auto" src="../images/blue insaka logo.jpg">
</div>
</div>
</nav>
If you check for javascript errors in the console you will find the problems:
popper.min.js
bootstrap.min.js
holder.min.js
These three js files could not be found.

Why is my ternary operator not working on a class in ERB to load images from a database to a bootstrap carousel?

I am trying to load images in a bootstrap carousel with images stored in a PostgreSQL database on my Ruby on rails app. I am using ERB on the front end. With the code below nothing shows up... I believe it has something to do with my ternary operator on my class but i am not sure what the exact problem is....
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<% #post.first(3).each do |image, index| %>
<li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
<% end %>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<% #post.first(3).each do |image, index| %>
<div class="item <%= index == 0 ? 'active' : '' %>">
<%= link_to image_tag(image.image.url, class:"images") %>
<div class="">
<h3><%= index %></h3>
</div>
</div>
<% end %>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Reason being your ternary operator are not getting index to make it working you need to do with each_with_index instead of each
So here is right way to do:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<% #post.first(3).each_with_index do |image, index| %> <!--use each_with_index -->
<li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
<% end %>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<% #post.first(3).each_with_index do |image, index| %> <!--use each_with_index -->
<div class="item <%= index == 0 ? 'active' : '' %>">
<%#= link_to image_tag(image.image.url, class:"images") %> <!--use image_tag -->
<%=image_tag image.image.url ,class: "images"%>
<div class="">
<h3><%= index %></h3>
</div>
</div>
<% end %>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have just fixed the issue, if images are there than it should work now. let me know for further guidance.

Bootstrap carousel with carrierwave

I am trying to make a slideshow using multiple photos that users uploaded through carrierwave.
This is my post/show.html.erb
<div id = "carousel-example-generic" class= "carousel slide" data-ride= "carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% #photo_attachments.each do |p| %>
<div class="item active">
<%=image_tag p.avatar_url.to_s%>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<% end %>
</div>
.....
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>
I cannot figure it out the way to list one photo per slide:( It is still listing all the photos that I have to scroll :(
You are applying active class to all photos that you use
div class="item active"
but it should be
div class="item"
and add this into your javascript
$( '.item:first' ).addClass( 'active');

Resources