I have added a full-width carousel to my Bootstrap template, however I would like to have a column structure inside the carousel.
So the ol and li elements should be full width, and the .container element should be at its max width of 1140px.
You can see what I mean in the below screengrab (the green tint is what I'd plan to be the .container element:
Here is the markup I'm using:
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Fernatest iur? Landige nimagna tinullabo. Et eumqui quiduntem ium sumque vitiae plam nest, eturepe rovitaspidel imodis eos perum velibus rere non explabore voluptinciae volum, ut am quos con reratiis rehent liquuntur aut odit quassin ctiatur sitatus, comnis diti iusam, omnimus quunto omnis et verum laborpor accus, sunt.</p>
</div>
</div>
</div>
</li>
</ol>
However this doesn't appear to work. When I look in dev tools, the container element appears to be shifted to the side, and the text is overflowing outside of it:
Is the container element not supposed to be placed inside an element such as this? Is there another way of achieving this kind of column structure?
Just want to inform you , you placed your container in wrong place, you placed it in where the dots are rendered.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="conatiner">
Caption Slide 1
</div>
</div>
<div class="item">
<div class="conatiner">
Caption Slide 2
</div>
</div>
<div class="item">
<div class="conatiner">
Caption Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You need to put container in .item division as the carousel-indicators are for the round icons shown in mockup in bottom of slider to navigate through slides. This might help you. Put the container division inside item division
'http://getbootstrap.com/javascript/#carousel'
Related
I am trying to show images in carousel slider but the problem is that images are not showing in one line and sliding also not working every image is showing in new line, next and previous button also not showing. Please check code below
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators" id="indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" id="homepageItems">
<div class="item">
<img src="/assets/Gallery/vd33qk3l.pj0.PNG"/>
</div>
<div class="item">
<img src="/assets/Gallery/spzkmguq.duw.PNG"/>
</div>
<div class="item active">
<img src="/assets/Gallery/bzmxjuy1.3ou.PNG"/>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Are you tried "float:left"
<style>
.carousel-inner .item{
float:left;
}
</style>
https://jsfiddle.net/hfn07tkv/
<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="C:/Users/Acer/Desktop/auto/cars/sliders/slider1.png" alt="BMW"
style="width:100%;" >
</div>
<div class="item">
<img src="C:/Users/Acer/Desktop/auto/cars/sliders/slider2.png" alt="BMW"
style="width:130%;" >
</div>
<div class="item">
<img src="C:/Users/Acer/Desktop/auto/cars/sliders/slider3.png" alt="BMW"
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>
this is my slideshow not working buttons i need help
BUTTON NEXT AND PREVIOUS NOT WORKING.
this is my code
need help
help need
i coppied this code from w3school website slideshow using carousel and i edited only src images that located in my desktop but the slideshow not working i dont know why can anyone explain to me why and thank you this is my first time using stackoverflow thank you .
jQuery would done the job for you:
$('a[data-slide="prev"]').click(function() {
$('#myCarousel').carousel('prev');
});
$('a[data-slide="next"]').click(function() {
$('#myCarousel').carousel('next');
});
i have an bootstrap carousel on my page. The images I use have all different heights. I want that all images have the same height. For that I used
.carousel{ max-height: 1000px; overflow: hidden; }
I know it's not perfect but it works on desktop view. But in mobile view it didn't work and the pictures have not the same height.
So how can I make it that the images have all the same height in mobile view?
I hope someone can help me :)
Thanks.
That's my carousel-code:
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="./img/index/seo.png" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/security.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/sport.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/service.png" 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>
I would suggest you to use height not max-height
Owl carousel is responsive so it adds width:100% to each image whatever the screen-width is. and probably your images won't get the 1000px height. so it would be better if you add this code.
#media only screen and (max-width: 576px) {
.carousel .carousel-inner .item{
height: 100px // feel free to add the height you want to use but it's going to change the ratio of your image
}
}
If images are not the same height I prefer if you add them to the div of class item as a background-image css property
I decided 2 use bootstrap carousel to show some pictures of some projects, but sadly I have some problems with this.
I want 2 carousels on the same row, but this seems like an impossible mission.
I have tried to use css where I give the outter div a width on 100% and then created to "inner divs" with a width on 40 % each.
Sadly this doesn't solve the problem.
<div class="outterBound row">
<div class="insideSize">
<!-- This is the slideshow, all the css works and the pictures wont be too wide -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<!-- remember to add the number of pictures here, else the idicator wont work! -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/sogo/Photo 26-05-16 15.52.38.png" alt="login">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.52.41.png" alt="frontPage">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.52.50.png" alt="updateProfile">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.53.10.png" alt="createAccount">
</div>
<!-- just add another "item" here if you want more pictures -->
</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>
</div>
<!-- slideshow ends here, you can add/remove pictures as you want to. -->
<div class="insideSize">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li> -->
<!-- remember to add the number of pictures here, else the idicator wont work! -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/sogo/diverse/Billede1_1.jpg" alt="login">
</div>
<!-- just add another "item" here if you want more pictures -->
</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>
<!-- slideshow ends here, you can add/remove pictures as you want to. -->
</div>
</div>
and here is the css file:
#charset "UTF-8";
p{
font-family: Garamond;
font-size: 14px;
}
.font{
font-family: Garamond;
font-size: 14px;
}
.padding{
padding-left: 15px;
}
.jumbotron p{
font-family: Garamond;
font-size: 16px;
}
h4{
align-items: left;
}
.carousel-inner>.item>img{margin:0; max-height: 70%;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 40%
margin: 0;
}
#media screen and (min-width: 1023px){
div.outterBound{
width: 100%;
}
}
#media screen and (min-width: 1023px){
div.insideSize{
width: auto;
}
}
Any ideas?
Here's a link for the website so you can see it with the pictures.
Try to use bootstrap column.
<div class="outterBound row">
<div class="insideSize col-sm-6">
First Carousel
</div>
<div class="insideSize col-sm-6">
Second Carousel
</div>
</div>
Be carful with the use of ID, an ID is unique, you can't have two id="myCarousel". Change the id for each carousel or use class.
I am trying to make the bootstrap carousel work and I'm kind of struggling.
The carousel doesn't automatically start and when I try to click on the arrows in order to change images, it just adds the id of the carousel in the address bar and doesn't change images.
Here's my code:
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/photos/2.jpg" alt="Band performing">
</div>
<div class="item">
<img src="img/photos/1.jpg" alt="Band performing 2">
</div>
<div class="item">
<img src="img/photos/3.jpg" alt="Band performing 3">
</div>
</div>
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Thanks,
Nevo
Found the answer, obviously idiotic.
Just forgot to add the bootstrap.js.