I want to keep my carousel and nav bar in the middle 75% of the screen so i laid my screen out with a grid. I cant recreate it on fiddle but if you put it into you local you'll see; screenshot: see 'block 4' on top of the pic, thats where the col starts
<div class="col-sm-3">col1 </div>
<div class="col-xs-12 col-sm-6"> Carousel goes here </div>
<div class="col-sm-3">col3 </div>
The problem is that my images overflow onto the 3rd col, how can i get the carousel to stay in my middle cell/col?
full code below
<body>
<!--rows and cols structure -->
<div class="row">
<div class="col-sm-3">block1 </div>
<div class="col-xs-12 col-sm-6">
<!--carouselstart-->
<div class="container page-content">
<div class="hero row">
<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="img/image1.jpg" alt="image 1 missing" title="Image 1">
<div class="carousel-caption">
<h3>caption1</h3>
</div>
</div>
<div class="item">
<img src="img/image2.jpg" alt="image 2 missing" title="Image 2">
<div class="carousel-caption">
<h3>caption 2</h3>
</div>
</div>
<div class="item">
<img src="img/image3.jpg" alt="image 3 missing" title="Image 3">
<div class="carousel-caption">
<h3>caption 2</h3>
</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>
</div> <!--end hero -->
</div><!--end of container-->
<!--nav bar goes here-->
<div class="col-sm-3">block4</div>
UPDATE....
I used thr chrome dev tools to alter some css and found that if i set the below to 100% then it fits perfectectly. How do i do this ?
Related
PFB is the example, Here I am using for Bootstrap Carousel control.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h
This example is working fine but when i am using tab key from the keyboard, control is not going on to anchor tag inside the div with class "carousel-caption".
I tried "tab-index" attribute for anchor tag to set the tabbing but tabbing is not working properly.
I want tabbing to work like below:
Left Arrow -> 1st anchor tag("LA is always so much fun!") -> 2nd anchor tag("Thank you, Chicago!") -> 3rd anchor tag("We love the Big Apple!") -> Right arrow
Could anyone please let me know how to implement tabbing for
<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\user1\Desktop\Sample\video-bg-static1.png" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static2.png" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static3.png" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</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>
You can't have tab index defined on an <li>, so we had to wrap our ul.carousel-indicators>li inside an anchor tag (which does work with tab index)...
Check the code which works with the same example and implements tabIndex as you wanted...
update: in light of questioner's comment, tab index now goes to the <p> under the heading on each slide instead of the carousel indicators; the href for these <a> tags to be updated by the user...
.carousel-indicators .active {
border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a class="active" tabindex="2" href="#myCarousel" data-slide-to="0">
<p>LA is always so much fun!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a class="" tabindex="3" href="#myCarousel" data-slide-to="1">
<p>Thank you, Chicago!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a class="" tabindex="4" href="#myCarousel" data-slide-to="2">
<p>We love the Big Apple!</p>
</a>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-target="#myCarousel" data-slide-to="0">
</li>
<li class="" data-target="#myCarousel" data-slide-to="1">
</li>
<li class="" data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<!-- Left and right controls -->
<a class="left carousel-control" tabindex="1" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" tabindex="5" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
According to your comment:
...Here I want to navigate between the carousel controls using the keyboard.
You can use keydown event. As reported in the documentation:
Keyboard events are only generated by , and anything with the contentEditable attribute or with tabindex="-1".
It's required to add tabindex="-1" to your carousel div plus the event handler.
$('#myCarousel').on('keydown', function(e) {
if (e.keyCode == 37) { // left arrow
$('#myCarousel').carousel('prev')
} else {
if (e.keyCode == 39) { // right arrow
$('#myCarousel').carousel('next')
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" tabindex="-1">
<!-- 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://dummyimage.com/300x200/000/fff&text=1" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=2" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=3" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- START OF FIRST LITTER GALLERY-->
<div class="col-lg-6 col-xs-12">
<div class="thumbnail">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" data-toggle="modal" data-target="#firstModal">
<!-- Modal -->
<div class="modal fade" id="firstModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="ffl" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="ffl" data-slide-to="0" class="active"></li>
<li data-target="ffl" data-slide-to="1"></li>
<li data-target="ffl" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
<div class="item">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
</div>
<div class="item">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#ffl" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#ffl" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="caption">
<p>THUMBNAIL TEXT</p>
</div>
</div>
</div>
<!-- END OF FIRST LITTER GALLERY-->
<!-- START OF SECOND LITTER GALLERY-->
<div class="col-lg-6 col-xs-12">
<div class="thumbnail flexbox">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" data-toggle="modal" data-target="#secondModal">
<!-- Modal -->
<div class="modal fade" id="secondModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div id="sfl" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="sfl" data-slide-to="0" class="active"></li>
<li data-target="sfl" data-slide-to="1"></li>
<li data-target="sfl" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
</div>
<div class="item">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png">
</div>
<div class="item">
<img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#sfl" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#sfl" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="caption">
<p>THUMBNAIL TEXT</p>
</div>
</div>
</div>
<!-- END OF SECOND LITTER GALLERY-->
Here is an example that I have created.
I have created my first website with bootstrap and I want to make it look as good as possible so now I hit something that cannot make without help.
The trouble is that I would like to have my images inside thumbnail same size even if they are different resolution. I used max/min-width/height but this does not solve the problem. Tried overflow but in that case my caption was under image.
What I am looking for:
In case if the image is not the right size I would like to have this image centred and rest of the image overflowed under the caption and thumbnail.
Also how to make my images in modal window original size.
This is the page that I have created so it may help to understand my problem.
There are several ways to do this.
The fastest way would be to change in css
.thumbnail img {
display: flex; /*remove this*/
float: left; /*remove this*/
margin-left: 50%; /*added this*/
transform: translateX(-50%); /*added this*/
}
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:
<div id="imageCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pics/space_1.jpg" alt="Space 1">
<div class="carousel-caption">
<h3>Space 1</h3>
<p>Infinite Boredom</p>
</div>
</div>
<div class="item">
<img src="pics/space_2.jpg" alt="Space 2">
<div class="carousel-caption">
<h3>Space 2</h3>
<p>Infinite Boredom</p>
</div>
</div>
<div class="item">
<img src="pics/space_3.jpg" alt="Space 3">
<div class="carousel-caption">
<h3>Space 3</h3>
<p>Infinite Boredom</p>
</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>
</div>
</div>
I have a bootstrap carousel that is working fine. However, when I make my window fullscreen, it does not span the entire width of the page. What styling would I use in order to do this?
Make sure you are following the correct nesting conventions. There may be an issue with your ".container" or ".container-fluid".
For more, reference: http://getbootstrap.com/css/#grid
I want to display 10 slides in a row in huge screen(lg and md) and based on the breakpoint size,carousel has to display the slides(In mobile view 1 slide and in tablet view 3 or 4 slides based on the screen size).Is it possible to design a responsive bootstrap carousel in all breakpoints?
Carousel doc:
You can just create and hide stuff depending on the screen using xs-hidden class to hide anything on a small screen.
<div id="carousel-top" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="hidden carousel-indicators" style="display:none">
<li data-target="#carousel-top" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-top" data-slide-to="1"></li>
<li class="" data-target="#carousel-top" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="...">
</div>
<div class="item hide-on-mobile">
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="...">
</div>
<div class="item keep-me-out-of-small-screen">
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class=" left carousel-control" href="#carousel-top" 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-top" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
JQuery:
if ($(window).width() < 960) {
$('#carousel-top .keep-me-out-of-small-screen').removeClass('item').addClass('hide');
}