I am developing an app with rails and using bootstrap to style most of it. When I am using the carousel structure it stacks one image above the other. Also I am assuming that the JavaScript it uses might not be running correctly.
Here is my code
<section class="carousel"
<div class="contanier">
<div class="row">
<div class="col-sm-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<%= image_tag("carousel_na_1.jpg") %>
<div class="carousel-caption">
<div class="carousel-caption"
<h3>Miel de Agave Natural</h3>
<p>¿Que es la miel de Agave?</p>
</div>
</div>
</div>
<div class="carousel-item">
<%= image_tag("carousel_na_2.jpg") %>
</div>
<div class="carousel-item">
<%= image_tag("carousel_na_2.jpg") %>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
Here are some images of how it renders:
enter image description here
Change the carousel-item class to item, and it'll work.
Related
I am building a basic "tribute website" for the first of the "Basic Front End Development Projects" in the freecodeCamp.org pipeline. I want to add a gallery that could be clicked through on the page, but after following the w3schools guide and doing about 2 hours of research, I can't find a single discrepancy between my code and what works for others. It may be possible that it only isn't working in the CodePen editor, but when I open a direct link to the page, the issues still occur.
<!-- Carousel Images -->
<div id="myCarousel" class="carousel slide container well" data-ride="carousel">
<!-- Slide Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- to s-->`
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Images (add alts)-->
<div class="carousel-inner" role="listbox"> <!-- role="listbox" -->
<div id="img1" class="item active">
<img src="...">
</div>
<div id="img2" class="item">
<img src="...">
</div>
<div id="img3" class="item">
<img src="...">
</div>
<!-- pointers -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span id="leftArrow" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span id="rightArrow" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CodePen link: here
Thanks!!!
I am not able to display images in carousel through image URL(JSON data). I am trying to set attribute using attr() in jquery but cannot achieve desired result. Here is my code:
<div class="col-md-8">
<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="1"></li>
</ol>
<!-- Wrapper for slides-->
<div class="carousel-inner">
<div class="item active">
<img src="" alt="myimage1" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
<div class="item">
<img src="" alt="myimage2" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
<div class="item">
<img src="" alt="myimage3" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
</div>
<!-- Left and Right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
In .js file:
$(document).ready(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) {
console.log(json);
console.log(json.articles.length);
for(var i = 0 ;i<3;i++){ //As my carousel contains only 3 images
$(".item").attr("src",json.articles[i].urlToImage);
}
});
});
The JSON response of API:
$(".item").attr("src",json.articles[i].urlToImage);
should be
$(".item img").attr("src",json.articles[i].urlToImage);
My slider isn't sliding and when I click on any buttons to change image it does not work. I am guessing this is something to with jQuery or the bootstrap.js file. Here is my HTML code
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="party.png" alt="Slide 1">
</div>
<div class="item">
<img src="party2.png" alt="Slide 2">
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
At the bottom of my page I have the JavaScript files. They look like this.
<script src="./js/jquery.js"></script>
I checked and the file paths are correct. Btw I am using Electron and not a plain browser. I don't think it makes a difference but just keep it in mind. Thanks! ;)
Is there a way to have multiple generic bootstrap carousels without IDs on a page work separately? Currently, both carousels are working, but when I click prev/next then it changes both carousels. I would think this would target the carousel clicked?
Thanks!
HTML
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
<li data-target=".carousel" data-slide-to="2"></li>
<li data-target=".carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".carousel" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Second Carousel -->
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target=".carousel" data-slide-to="0" class="active"></li>
<li data-target=".carousel" data-slide-to="1"></li>
<li data-target=".carousel" data-slide-to="2"></li>
<li data-target=".carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href=".carousel" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JS
$('.carousel').each(function(){
$(this).carousel({
interval: 3000
});
$(this).on('click', '.left', function(){
$(this).carousel('prev');
});
$(this).on('click', '.right', function(){
$(this).carousel('next');
});
});
As per my understanding you need to have different selected to bind the events for 2 different carousel. So you need to use different class or different ID or any 2 different selected.
I have found a perfectly working solution to the question of how to link to a specific slide in a bootstrap carousel. However, I have multiple carousels with different Id's running on the same page. How can my link target a specific carousel id?
The specifics:
I have three carousels
They have different ids: "carousel-01", "carousel-02", "carousel-03".
I call the function to be able to link to specific slides. Here it is carousel-01. Could also be carousel-03
function goToSlide(number) {$("#carousel-01").carousel(number);}
Then I put my link in the markup
Go to slide #5
My question is: How can I make the link target a carousel with a specific id. Let's say, I'd want not #carousel-01 move but #carousel-03?
You must use different id for both carousel like this
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
Then call the carousel via javascript
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('#carousel2').carousel()
</script>
Here is the solution for that on click if 'Go to slide3' , It will take the specific slider , ex: that is now i am targeting it to the class 'slidehere' in '#carousel2'
<!-- link to specific slider -->
Go to slide3
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2" class="slidethis"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item slidethis"> <!-- targeted item on click 'slidethis'-->
<img src="..." alt="...">
<p>slide</p>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
javascript required
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('.slide3').click(function() { //onclick
/* Act on the event */
$('#carousel2 .carousel-inner .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-inner .slidethis').addClass('active') //adding active class to targeted slide
$('#carousel2 .carousel-indicators .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-indicators .slidethis').addClass('active')/adding active class to targeted slide
});
</script>