Im using carousel bootstrap and my images are in cloudinary.
I cant see the images, i can see the buttons next and previus, the text but not the imges.
every idea counts.
Thanks
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<% #portfolios_consultoria.each_with_index do |p, index| %>
<div class="carousel-item <%= index == 0 ? 'active' : '' %>">
<img class="d-block w-100 url('<%= cl_image_path p.photo.key unless p.photo.key.blank?%>')">
</div>
<h3><%= p.name %></h3>
<% end %>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Related
I have a search results screen showing 10 results (locations in the world) per page. If a result has an image available, the image will show, otherwise it shows the location on an OpenLayers map.
I'm just trying to upgrade this page using Bootstrap carousel to allow users to cycle between the map and the image (if available).
I got carousel working fine using 2 test images. However when I swap in the OL map, although the image/photo shows OK, when you cycle to the next item (the map), the map just shows a white screen / nothing shows.
Code is below. (FYI the map works fine when I pull it out of the carousel code.
Any ideas?
Happy to share the Ol.map code, although as mentioned it runs OK outside of carousel, so I assume it might be some sort of formatting/CSS issue.
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#phototouse, class:"map img-responsive", style:"display:block;height: 100%;max-height:350px") %>
</div>
<div class="carousel-item">
<div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Update:
I thought I had got this working by adding in the updateSize event (below) but weirdly the map only shows when I resize the window. If I don't touch the window, the map doesn't show and I get the following java error: 'map1.updateSize is not a function'.
Any ideas?
<div class="container-fluid normaltextblack" style="background-color: #F3F3F3;">
<div class="row" style="height:350px">
<div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
</div>
<div class="carousel-item">
<div id="testmap" class="map img-responsive" style="height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" onclick="resizemap();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" onclick="resizemap();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
function resizemap() {
setTimeout(function(){
var map1 = document.getElementById("testmap");
map1.updateSize();
}, 1000);
}
</script>
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).
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');