I am trying out Twitter bootstrap 3. I am quite new to HTML, CSS and Javascript. I have a carousel which i created and it's code looks like so:
<div class="container">
<div id="myCarousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row text-center">
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
</div>
</div>
<div class="item">
<div class="row text-center">
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
<!-- ITEM-->
<div class="col-md-3">
<div class="thumbnail product-item"> <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>
</div>
</div>
<!-- ITEM-->
</div>
</div>
</div>
<!-- /INNER-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
</div>
</div>
Now this is set to show 4 images at a time. The thing is I have 8 images. In the carousel above it displays 4 images at a time and then slides to the next 4. Here's the Javascript:
<script type="text/javascript">
$('.carousel.slide').carousel()
</script>
And the CSS:
#media (max-width: 767px){
.carousel .row .span3 {
display: block;
float: left;
width: 25%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.carousel .carousel-control { visibility: hidden; }
How do I get the images to move only one-at-a-time in a continuous loop?
Take a look at this Bootply: http://bootply.com/94452
You can use jQuery to clone() the items accordingly..
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
Alternative option: Bootstrap carousel multiple frames at once
Related
So I was having trouble with changing a 3x3 image gallery layout on any screen > than 768px (tablet/desktop) to an image slider for any screen < than 768px (mobile).
After the help of everyone and especially Danilo (solutions in the comments), the problem was that the css was not correctly targetting the screen, I needed - #media only screen, I had also missed a DIV... (I know noob error).
So if anyone is trying to change the content displayed from desktop layout to mobile layout in Bootstrap 4, you can use CSS media queries that target the wrapped DIV to display or not display.
Updated working snippet below:
#media only screen and (min-width: 768px) {
.slider {
display: none;
}
.block {
display: block;
}
}
#media only screen and (max-width: 768px) {
.slider {
display: block;
}
.block {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
<!--- Start of Gallery Section -->
<div id="hold-tests">
<div class="col slider">
<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
<div class="carousel-inner col-" role="listbox">
<!--- First Slide -->
<div class="carousel-item active">
<img src="Img/PHportrait.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait.png" alt="background image">
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
<div class="col block">
<div id="gallery" class="offset">
<div class="col-md">
<div class="row no-padding">
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
</div>
<!--- End of Gallery Section -->
Since you're using bootstrap, use it. No jQuery needed for this, as it's completely covered already.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
Only visible starting from md
</div>
<div class="d-md-none">
Only visible on small screen
</div>
https://getbootstrap.com/docs/4.0/utilities/display/
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Also note that ids usually don't start with a #. Even though this may be legal, you'd then at least had to select them with $('##option1') in your jquery code.
You can do that, just using CSS
html
<div class="hold-tests">
<div class="col test1">Test1</div>
<div class="col test2">Test2</div>
<div class="col test3">Test3</div>
</div>
css
#media only screen and (min-width: 768px) {
.test1 {
display: none;
}
.test3 {
display: block;
}
}
#media only screen and (max-width: 768px) {
.test3 {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
I am trying to create a responsive carousel thumbnail slider using bootstrap. In Desktop there is no problem. Everything is fine. But when i resize the window for mobile display the carousel break down the column in vertical direction.
I want to display the one thumbnail image in one time and want to show the next all one after one.
i want like this in mobile
following is my working demo
.collaborators {
background: #0492da;
font-family: 'Work Sans', sans-serif;
color: #fff;
padding: 50px 0;
position: relative;
z-index: 2;
}
.collaborators h1 {
font-size: 50px;
font-weight: 300;
}
.text1 {
font-size: 20px;
}
.carousel-control {
width: auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="collaborators">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>Collaborators</h1>
<p class="text1">Based in the Ottawa/Gatineau area, Lead Action specializes primarily in Leadership Development.</p>
</div>
<div class="col-xs-12">
<div id="collaborators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#collaborators" data-slide-to="0" class="active"></li>
<li data-target="#collaborators" data-slide-to="1"></li>
<li data-target="#collaborators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="col-lg-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#collaborators" 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="#collaborators" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
Try this code snippet, Hope this is what you expected. If you have any questions, you can ask in the comment section.
I have also referred the w3schools bootstrap carousel.
.collaborators {
background: #0492da;
font-family: 'Work Sans', sans-serif;
color: #fff;
padding: 50px 0;
position: relative;
z-index: 2;
}
.collaborators h2 {
font-size: 50px;
font-weight: 300;
text-align: center;
}
.text1 {
font-size: 20px;
text-align: center;
}
.carousel-control {
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="collaborators">
<h2>Collaborators</h2>
<p class="text1">Based in the Ottawa/Gatineau area, Lead Action specializes primarily in Leadership Development.</p>
<div class="col-xs-12 text-center">
</div>
<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="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="New york" style="width:100%;">
</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>
</div>
</body>
</html>
Edited Version
4 images per carousel item
.collaborators {
background: #0492da;
font-family: 'Work Sans', sans-serif;
color: #fff;
padding: 50px 0;
position: relative;
z-index: 2;
}
.collaborators h2 {
font-size: 50px;
font-weight: 300;
text-align: center;
}
.text1 {
font-size: 20px;
text-align: center;
}
.carousel-control {
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="collaborators">
<h2>Collaborators</h2>
<p class="text1">Based in the Ottawa/Gatineau area, Lead Action specializes primarily in Leadership Development.</p>
<div class="col-md-12 text-center">
</div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</body>
</html>
First of all I don't know nothing about javascript.
I have this slider:
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div><!-- Carousel nav -->
</div>
</div>
</div><!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>
And with this javascript, they works:
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
But I would like to make the thumbnail with an active class, how can I made this with javascript // jquery?
Thanks a lot to help me!
Get all of the thumbnail images with $('.thumbnail img');, then when you click on one of the #carousel-selector-* elements, remove the .active class from all other thumbnails and add it to the one inside of the link you clicked on.
var $imgs = $('.thumbnail img');
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id"),
$img = $(this).find('img');
$imgs.not($img).removeClass('active');
$img.addClass('active');
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div>
<!-- Carousel nav -->
</div>
</div>
</div>
<!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>
I can't get this Bootstrap carousel snippet to work. I have added the code below to my Bootstrap HTML layout, but I'm not sure that the script is in the right place.
What am I doing wrong?
<!-- !FOTO AUTO -->
<div id="container-slider-dettaglio-auto">
<!-- Slider -->
<div id="slider-foto-auto" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!-- Top part of the slider -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img class="img-responsive" src="img/foto-auto/audi-s4/audi-s4-avant-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="1">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-2.jpeg" alt="Frontale Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="2">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="3">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-4.jpeg" alt="Angolare Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="4">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-5.jpeg" alt="Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="5">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-6.jpeg" alt="Cerchione Audi S4" title="Audi S4">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="hidden-xs col-lg-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-2-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-1">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-2">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-4-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-3">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-5-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-4">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-6-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
</ul>
</div>
</div>
<!--/slider-dettaglio-auto-->
</div>
<!--/container-slider-dettaglio-auto-->
<!-- /FOTO AUTO -->
</div>
<!-- /content -->
</div>
<!-- END CONTENT ROW -->
I added this script before the end of the <body>:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function(e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-' + id).html());
});
});
The solution that Work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> into the <head> and not at the bottom of <body>.
Is it correct?
I can't get Bootstraps carousel to work with rails... what am I missing?
1.) I downloaded a custom version of bootstrap with the carousel component.
2.) Placed it in my assets/js and required the file in application.js
3.) Initialized the carousel by:
$(document).ready(function(){
$('.carousel').carousel()
});
4.) Put my html markup:
<section class="wrapper row">
<article class="slider">
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</article>
</section>
It's not working! Any ideas?