Is there any option in bootstrap carousel to animate it to top to bottom and bottom to top, instead of right to left and left to right.
jsFiddle
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
</p>
</div>
</div>
</div>
</div> <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 get change the direction of carousel using this code (The JSFiddle example at the end)
Pay attention to the CSS vertical class selector
CSS: ( the essence of the change of carousel direction )
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next {
top: 400px;
}
.carousel.vertical .prev {
top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -400px;
}
.carousel.vertical .active.right {
top: 400px;
}
.carousel.vertical .item {
left: 0;
}
Javascript:
$('.carousel').carousel({
interval: 3000
})
HTML:
<div class="container">
<div class="row-fluid">
<div class="span6 offset3">
<div id="myCarousel" class="carousel slide vertical">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/600x400&text=First+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Second+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Third+Slide">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
You can see it in action here: http://jsfiddle.net/wram2h2p/
Related
This is quite a difficult issue to explain without seeing it so I will include a link to where you can view the website so you can see for yourselves.
Basically, my Bootstrap image slide works perfectly on my desktop, however, when I view it on my iPhone X each slide sort of slides twice (or bounces?) for each transition.
It might be worth noting that it does NOT do this when I view it on an iPhone 7 (it works perfectly).
I cannot for the life of me work this out, and have tried researching it but appears no one has posted this same issue before...
It seems like an iPhone issue and hopefully the fact that it works on an iPhone 7 but not an iPhone X could help solve it?
Website Link
/* Jumbotron Carousel */
.preload {
display: none;
}
.carousel-inner .carousel-item {
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, -ms-transform 0.4s ease;
transition: transform 0.4s ease, -o-transform 0.4s ease;
transition: transform 0.4s ease, -moz-transform 0.4s ease;
}
.jumbotron .container {
height: 500px;
}
.carousel-inner {
width: 100%;
height: 450px;
}
.carousel-indicators:hover {
cursor: pointer;
}
.carousel-control-next {
height: 0;
top: 50%;
}
.carousel-control-prev {
height: 0;
top: 50%;
}
.carousel-control-prev-icon {
opacity: none;
}
.carousel-control-next-icon {
opacity: 2;
}
#slide1 {
background-color: black;
background-image: url(/images/home1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide2 {
background-color: black;
background-image: url(/images/home2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide3 {
background-color: black;
background-image: url(/images/home3.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.carousel-indicators {
bottom: -10%;
position: absolute;
}
#jumbo-btn {
background-color: #e4381C;
border-color: #e4381C;
}
<!-- Carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myslider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div id="slide1" class="jumbotron">
<div class="container">
<div class="row">
<div id="slide1-text" class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide2" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="#" role="button">View Stock</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide3" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The slideshow END -->
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myslider" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myslider" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Left and right controls END -->
</div>
<!-- Carousel END -->
Same bug on the latest version of bootstrap...
The content slide twice.
My workaround is to use a custom slide-fade affect explained here:
https://silvawebdesigns.com/how-to-change-the-bootstrap-4-carousel-to-a-fade-transition-instead-of-slide/
I believe this is related to the version of bootstrap 4 you are using if you upgrade to the latest version 4.5.2 this should solve the issue.
I am trying to create a responsive carousel slider with multiple items(example 4). However I could not show the 4 items. Only 1 item is show. I have created a working demo as well. Here it is
http://jsbin.com/yizepahoxa/1/edit?html,css,js,output (updated with 3.3 jquery version)
How could i show the 4 items like in e-commerce slider (https://mobirise.com/bootstrap-carousel/multiple-items-carousel.html)?
html
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4 col-sm-12"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
css
.multi-item-carousel {
.carousel-inner {
> .item {
transition: 500ms ease-in-out left;
}
.active {
&.left {
left: -33%;
}
&.right {
left: 33%;
}
}
.next {
left: 33%;
}
.prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item {
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none !important;
}
}
}
.carouse-control {
&.left,
&.right {
background-image: none;
}
}
}
// non-related styling:
body {
background: #333;
color: #ddd;
}
h1 {
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}
js
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: 3000
});
$('.multi-item-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));
}
});
I have used the bootstrap carousel with jquery of version 3.3.1 and bootstrap of 3.3.6
This question already has answers here:
Bootstrap 3 Carousel fading to new slide instead of sliding to new slide
(9 answers)
Closed 5 years ago.
I am trying to make a carousel bootstrap with fade effect, but I am not so expert about this effect. I thought something like this css code
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
but i don't know how to apply it in my code.
This is my Carousel:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="images/slide/slide-1.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="images/slide/slide-2.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="images/slide/slide-3.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<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>
and this is my custom.css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 800px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
}
I added the class carousel-fade and some custom css
See it in action: http://www.bootply.com/4kbsvxixnA
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=0099ff&txtclr=ffffff&txt=Blue&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=ff33d6&txtclr=ffffff&txt=Pink&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=97e345&txtclr=ffffff&txt=Green&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
CSS:
/* YOUR CSS simplified */
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: auto;
width: 100%;
line-height: 1;
}
/*Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from: http://codepen.io/transportedman/pen/NPWRGq
and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from: http://codepen.io/Rowno/pen/Afykb*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
Need to override the 3.3 new styles for modern browsers & apply opacity*/
#media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
Add carousel-fade parent class to the
<div id="myCarousel" class="carousel slide carousel-fade">
and add the following css to your custom css stylesheet.
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
I have used dummy images from bootstrap to create a demo showing the
fade behavior.
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="" >
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
<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>
I'm using a off canvas navigation bar I found from a template and by default it is set to hide. I want it so that it completely takes the left side of the screen and no matter where the user scroll it will always "be there".
Can someone help me achieve this? Also any way I can make this mobile friendly by possibly making it collapse for smaller screens?
The "menu" button isn't appearing correctly but it is the long grey bar across the slideshow. I have a feeling it is in the css, so I made a comment as to where the css for the navbar begins.
https://jsfiddle.net/nv7rsgpg/9/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Side Menu */
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 0;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
#sidebar-wrapper.active {
left: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 100vh;
}
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
.v-center {
position: absolute;
height:100px;
width:40%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
left:15%;
}
</style>
</head>
<body>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a>
</li>
<li>
<a href="#top" onclick = $("#menu-close").click(); >Home</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >About</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >Services</a>
</li>
<li>
<a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
<header>
<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" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</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>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Stylish Portfolio is the perfect theme for your next project!</h2>
<p class="lead">This theme features some wonderful photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center">
<h1>Vertically Centered Text</h1>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Our Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-1.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-2.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
View More Items
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</aside>
<!-- Map -->
<section id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4><strong>Start Bootstrap</strong>
</h4>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li>
<li><i class="fa fa-envelope-o fa-fw"></i> name#example.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-dribbble fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
Just add the active class to the sidebar-wrapper
<nav id="sidebar-wrapper" class="active">
and since you don't want to hide it ever, you can remove the menu-toggle link
<!-- REMOVE this -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
And since the menu is always on, you need to move your body so that it is not covered up. For that you do this
body {
padding-left: 250px;
}
Note that because you are using a non-fluid container, this would cause the content to overflow if the screen / window is not large enough. You could work around this a bit by replacing all the containers with container-fluid, but your images are going to look stretched.
The right way would be to modify your responsive wrap points in your Bootstrap less files to account for the menu. But looking at the menu width being hardcoded, I doubt you are targeting smaller screens.
Fiddle with container - https://jsfiddle.net/9n8dtr5o/show
Fiddle with container-fluid - https://jsfiddle.net/z9Lknqn7/show
Maybe this is one of the toughest challenges, how can I vertically align in the middle the showing images on this fixed height Bootstrap (v3.3.5) carousel? I'd tried to display some classes as a table-cell and vertical-align them to middle but there's still a problem, the sliding image will just be vertically aligned when sliding-completed or when .active but it will also placed the image on the right side instead to the center.
/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
display: table-cell;
vertical-align: middle;
} */
.carousel-inner > .item {
height: 150px;
}
.carousel-inner img {
margin: auto;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<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="http://placehold.it/350x65" alt="350x65">
<div class="carousel-caption">
<h3>Item 1</h3>
<p>Not vertically center..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/350x150" alt="350x150">
<div class="carousel-caption">
<h3>Item 2</h3>
<p>The image height is just fit..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="200x100">
<div class="carousel-caption">
<h3>Item 3</h3>
<p>Not vertically center..</p>
</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
Add this to your css:
.carousel-inner .item img {
position:relative;
top:50%;
transform: translateY(-50%);
}
You can position the element absolutely ensuring the parent element is position relative so that the child element respects it's position to it.
.carousel-inner > .item {
height: 150px;
position: relative;
}
.carousel-inner img {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Set position:absolute, all sides to 0 and margin:auto.
Here you go:
/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
display: table-cell;
vertical-align: middle;
} */
.carousel-inner > .item {
height: 150px;
}
.carousel-inner img {
margin: auto;
}
.carousel-inner .item img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<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="http://placehold.it/350x65" alt="350x65">
<div class="carousel-caption">
<h3>Item 1</h3>
<p>Not vertically center..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/350x150" alt="350x150">
<div class="carousel-caption">
<h3>Item 2</h3>
<p>The image height is just fit..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="200x100">
<div class="carousel-caption">
<h3>Item 3</h3>
<p>Not vertically center..</p>
</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
See if this is what you're looking for: should probably test it with actual images just to make sure it looks right.
.carousel-inner .item img {
margin: 0px auto;
height: 150px;
text-align: center;
}