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
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.
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).
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.
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.
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');