I am having trouble making my bootstrap carousel display differently on a mobile device and a desktop screen.
Here is my HTML:
<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">
<center><img src="img.jpg" alt="..."></center>
<div class="carousel-caption">
<p>1st Screen</p>
</div>
</div>
<div class="item">
<center> <img src="img2.jpg" alt="..."></center>
<div class="carousel-caption">
<p>2nd Screen</p>
</div>
</div>
<div class="item">
<center><img src="img3.jpg" alt="..."></center>
<div class="carousel-caption">
<p>3rd Screen</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
You can view the site here
The problem I am having is that my image sizes are appearing different on mobile devices, the 3 images I have are:
img.jpg Dimensions = 700 x 378 pixels
img2.jpg Dimensions = 700 x 378 pixels
img3.jpg Dimensions = 700 x 378 pixels
The images show up fine on desktop devices however on mobile devices the whole image seems to enlarge and some of image goes off the screen.
I want a media query which makes all images width:100% on mobile devices only.
Or is there is an easy way to preserve the size of images on all devices?
Appreciate the help
Bootstraps has a predefined CSS-class called "img-responsive". This should scale your images properly on mobile devices. An example:
<img src="..." class="img-responsive" alt="Responsive image">
Actually there is a jQuery slider plugin called Skidder. Doesn't have the same design as the default bootstrap carousel but is quite good. .img-responsive won't do.
Edit: In the carousel's CSS add height: 54vw; and it should work just fine. (Height/Width% = 54)
Related
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 am a beginner and trying to implement Twitter Bootstrap Carousal, and I have two requirements.
Carousal/Image should be of the Height of the screen/browser (No Scrolling): No matter what the screen size is.
Text in the Carousal should be in the center irrespective of the screen size.
Below is standard Carousal for Bootstrap Carousal by Bootstrap:
<div class="container-fluid">
<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="~/Content/Images/15.jpeg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h1>Los Angeles</h1>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="~/Content/Images/20.jpeg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="~/Content/Images/10.jpeg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</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>
Issue with above code:
Text is shown at the bottom (Need to scroll for that).
To see the entire Image/Carousal user has to scroll. Not sure why this happens
Attempt made by me:
I set the height is set to 515 px;
Added CSS below:
.item{
position: relative;
}
.carousel-caption
{
top:35%;
position: absolute;
}
<div class="item active" style="height:515px">
<img src="~/Content/Images/15.jpeg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h1>Los Angeles</h1>
<p>LA is always so much fun!</p>
</div>
</div>
Output:
So far so Good
But when I decrease the size of browser this is what I get:
Expected Behaviour:
The default bootstrap carousel controls (left and right arrows) have links that span 100% of the height of the image in the carousel. I apologize as this may be a silly question, but how do you change this so that the links are only over the width and height of the arrows themselves?
You can see an example of what I mean under "Carousel" on the Boostrap docs(https://getbootstrap.com/docs/3.3/javascript/#carousel), and the code for the carousel is below.
<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">
<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-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>
I ended up here after doing a Google search, figured out on my own, so I'm adding my solution for Bootstrap 4.x so others can find this easy solution.
Since the icons are SVGs, adjusting BOTH the height and width will change the size of the icons. I had assumed they would change size if I increased the width, but that's not the case.
I used vw so they scale along with the screen, but you can use whatever units you want.
.carousel-control-next-icon,
.carousel-control-prev-icon {
width: 5vw;
height: 5vw;
}
add a class with 'carousel-control' and then add the following CSS.
or you can directly add this CSS to your code
#carousel-example-generic a.carousel-control {
height: 26%;
top: 33%;
width: 86px;
background: black;
//add your own CSS as you need
}
add in both .carousel-control.left and .carousel-control.right,
//change the margin to make the width and height more longer or shorter
margin: 100px 0;
//change the radius to make the point of the squared-hover looks rounded
border-radius: 60px;
add max-height & margin-top css values
<a style=" max-height:21%; margin-top:21%; " .....
to visually see the changes ( make aria-hidden="false" in first <span> & add background-color:blue; in <a> )
// note i tried this in bootstrap 4 not sure about 3
My bootstrap carousel looks fine on desktop. The images are sized at 1200x400. But on mobile, it shrinks in so much that you can't ready the text on the images. Also, the navigation dots on the bottom of the player move up on top of the image.
1) How do I keep the size big enough to read the text on the images on mobile
2) How do I prevent the navigation dots on the bottom of the player from overlapping on my image on mobile
Here's my bootply:
http://www.bootply.com/huskydawgs/6UtgjHqm8f
Here's my html:
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-12">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://www.onvia.com/responsive/apple_orange_testimonials.png" alt="Apples and Oranges">
</div>
<div class="item">
<img class="img-responsive" src="http://www.onvia.com/responsive/pears_mangos_testimonials.png" alt="Pears and Mangos">
</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>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
Here's my css:
.content-section-b {
padding: 50px 0;
background-color: #3C5A78;
}
.carousel-control.left {
background-image:none;
}
.carousel-control.right {
background-image:none;
}
The problem is with the source images: they make it seem as if they were two different carousel items, when are in fact only one (apple-orange & pear-mango)... For a quick fix, you could make individual images from the sources (one for each fruit), hide the regular carousel through media queries on xs screens, and have a visible-xs carousel which has 4 instead of 2 carousel items.
It's not a great solution, though.
Fast example: http://www.bootply.com/U5uYwmnt1g
EDIT
Added the CSS to move the navigation dots on mobile not to overlap with the slides.
Expanding on why it's not the best solution:
-You should make the elements of the carousel be html elements, for a start, and not rely completely on images with shapes and text inside (everything on your images can be replicated easily with CSS, using images only for the fruits, or for the fruits and the cirle, if you don't care to make the circle with CSS)
-Once this is done, you could skip the 2nd carousel and modify the content of each slide through media queries (or helper classes) to get the desired result
-The CSS for the navigation dots uses the max-width query, which I understand is not usually recomended, though in this case it might be well used (if somebody can expand on this, please do)
I am having an issue with the Bootstrap Carousel component, where the image is not sliding during transition.
Basically, the image seems to just get replaced (and does not slide) as can be seen from the Bootstrap site.
The other issue I am facing is that the image, when changing from one to the other seems to get overlaid on top of the left and right chevron icon controls.
I've scoured SO and found something similar:
Twitter Bootstrap Carousel Not Sliding
But the solution provided does not seem to apply for me as I am using the minified version of the Bootstrap JS which already has the transition function embedded.
Anyone came across a similar issue before?
As Leon has asked for some codes, I am practically perusing the same codes as posted in the Bootstrap website. Its just the issue has been the same where the image is not sliding in transition, but rather just getting invisible / visible and after a while where the slide gets visible, the chevron control seems to be behind the image (for a split second) and then gets on top of the image afterwards.
<!-- Carousel [START] -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- <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> -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/img/slider-images/header-images-01.jpg" alt="Slide 1" class="img-responsive">
</div>
<div class="item">
<img src="assets/img/slider-images/header-images-02.jpg" alt="Slide 2" class="img-responsive">
</div>
<div class="item">
<img src="assets/img/slider-images/header-images-03.jpg" alt="Slide 3" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left glyphcolor" 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 glyphcolor" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel [END] -->
UPDATE: The chevron icon also gets covered when I clicked on it to transition to the next slide.
Check out the css of div.item, if you have position: absolute / relative.
In other cases, try to create new document only your carousel, check if it works alone and if that's the case, your problem must be coming from earlier part of your code... Sometimes console wont show you what's wrong so you'll have to trace by yourself