I'm trying to make a multiple items bootstrap carousel but it gives me this error: "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function, how can fix it?
here is my code:
$(document).ready(function () {
('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>
From the code you pasted, I cannot see that you are loading Bootstrap library (css and js code). You can see Bootstrap loading information here http://getbootstrap.com/getting-started/
A full description of Carousel component is reported in boostrap 4.
In this page, instead, you will find the required libraries.
Working code:
$(document).ready(function () {
$('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="carousel-item item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>
Related
So, i'm working on Image Gallery with Bootstrap...
Problem is i can't make four images two on top, three under the top ones and on the left corner vertical image. You can see in the image i have four images placed okay but vertical one is under them...
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
</div>
</div>
What should i try? here is the image
You may imbricate class and elements ;
possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/300x600" class="col-4">
<div class="row wrap col-8">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
</div>
</div>
</div>
Here is a suggestion
.col {
margin: 5px;
height: 200px;
}
.col-4 {
margin: 5px 0px;
}
.col-4,
.col {
background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-4"></div>
</div>
i have requirement where i need a multi item carousel with 3 items per slide there i also created carousel using bootstrap 3.3.7 & angular 6+ here the issue is it is giving lagging slide over slide / lagging after giving ng build --prod
below is my code
Below is visual representation of my problem https://youtu.be/7cjbHgTsVjc
<div class="container">
<div class="row">
<div class="col-xs-12" id="datacase">
<h2 class="h">Test Data</h2>
<div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=A" alt="Card image cap">
<h5>A CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> A Content
</p>
</div>
</div>
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=B" alt="Card image cap">
<h5>B CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> B Content
</p>
</div>
</div>
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=C" alt="Card image cap">
<h5>C CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> C Content
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=D" alt="Card image cap">
<h5>D CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> D Content
</p>
</div>
</div>
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=E" alt="Card image cap">
<h5>E CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> E Content
</p>
</div>
</div>
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=F" alt="Card image cap">
<h5>F CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs">F Content
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=G" alt="Card image cap">
<h5>g CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> g Content
</p>
</div>
</div>
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=H" alt="Card image cap">
<h5>H CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs"> H Content
</p>
</div>
</div>
<div class="col-lg-4">
<div class="custom-box">
<img src="http://www.placehold.it/300x300&text=I" alt="Card image cap">
<h5>I CONTENT</h5>
<p style="text-align: justify;padding:12px" class="cs">I Content
</p>
</div>
</div>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#imageCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
.scss code
.carousel-control.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
background-repeat: repeat-x;
left: -169px;
}
.carousel-control.right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
background-repeat: repeat-x;
right: -169px;
}
.glyphicon-chevron-left:before {
color: black;
}
.glyphicon-chevron-right:before {
color: black;
}
.custom-box {
background: #FFFFFF;
border: 1px solid #DCDBD7;
margin: 30px 0;
padding: 0px -1px 35px;
text-align: center;
min-height: 35rem;
}
.custom-box img {
width: 100%;
height: 15vw;
}
.custom-box h5 {
font-size: 20px;
color: #2D373C;
letter-spacing: 0;
line-height: 20px;
}
.cs {
color: #2D373C;
letter-spacing: 0;
line-height: 20px;
}
below is my stack blitz url
https://stackblitz.com/edit/angular-f2hx6b
Note: as stackblitz not properly supporting angular with jquery so only code is there for reference of the the problem please check the video
here i am displaying the data in bootstrap carousel here for each slide i am displaying 3 images and in the last slide i am displaying only 2 images there it is showing how can i perform loop and continue the slide with out showing empty while applying dynamic data i unable to perform the same task below is the code which i performed in html
.html code
<div class="container">
<div class="col-xs-12">
<h1>Bootstrap 3 Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
.css
/* override position and transform in 3.3.x */
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
.carousel-control.left,.carousel-control.right {background-image:none;}
.js code:
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
You're probably better off using a library such as ng-bootstrap or ngx-bootstrap.
Keep in mind that these libraries do not support animations yet. This way you can avoid using jQuery, and saves you from writing a bunch of code.
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>
I wanted descriptionClass is show over itemClass when I make .slider-imgClass is Hover .......................
how use Jquery OR javascritp OR CSS ..............
html
<div id="carousel-example-generic">
<div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
<div class="carousel-inner">
<div class="item active">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
</div>
<div class="item ">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
</div>
<div class="item ">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
</div>
</div>
</div>
<a data-slide="prev" href="#carousel-example-captions" class="left carousel-control">
left
</a>
<a data-slide="next" href="#carousel-example-captions" class="right carousel-control">
right
</a>
</div>
css
.descriptoion{
border: 1px solid red;
bottom: 0;
color: red;
height: 250px;
line-height: 40px;
position: absolute;
right: -222px;
width: 200px;
word-wrap: break-word;
z-index: 1000;
background-color:#f0f0f0;
display:none;
font-size:20pt;
text-align:center;
}
.descriptoion:before{
position:absolute;
content:"";
border:20px solid transparent;
border-right:20px solid #f0f0f0;
top:50%;
left:-42px;
z-index:1000;
}
.descriptoion:after{
border:22px solid transparent;
border-right:22px solid red;
z-index:10001;
content: "";
left: -46px;
position: absolute;
top: 49%;
z-index: 1;
}
.slider-img:hover .descriptoion{
display:block;
}
jquery
$(".slider-img").hover(function(){
$(this).parent().parent().addClass('not-overflow');
});
$(".carousel > a").click(function(){
$(".carousel-inner").removeClass("not-overflow");
});
i have this problem
i wanted this style
UPDATEDEMO
Basically you have to remove the overflow:hidden property from .item-active and also from .carousel-inner.
If you see the cycle image breaking out of the div, limit the size of that image.
Also you seem to be having repetitive classes in your css file.
DEMO FIDDLE