Hey guys!
I'm trying to make a site with a Carousel with Col-MD-6, no-scroll and 100% browser Height, identical to this web site. https://uk.nicolasvahe.com Can you help-me to do this?
Hey guys!
I'm trying to make a site with a Carousel with Col-MD-6, no-scroll and 100% browser Height, identical to this web site. https://uk.nicolasvahe.com Can you help-me to do this?
Here is a possible method like what the site does (just not totally). I can't seem to find how they are getting the section on the right to be on the right. I don't see positioning/floating/flexbox etc...
They are not using the normal Bootstrap carousel, they are using something custom.
So this is my attempt to get something close, using the BSS supplied carousel.
<div>
<div class="std">
<div id="main-images">
<div data-ride="carousel" class="carousel slide" id="carousel-1">
...
</div>
</div>
<div id="secondary-images" class="row no-gutter">
<div class="col-md-6">
<div>
...
</div>
</div>
<div class="col-md-6">
<div>
...
</div>
</div>
<div class="col-md-12">
<footer>
...
</footer>
</div>
</div>
</div>
</div>
This is the CSS that I used to get it.
.row.no-gutter {
margin-left:0;
margin-right:0;
}
.no-gutter [class*="col-"] {
padding-left:0;
padding-right:0;
}
@media (min-width:992px) {
.std {
height:800px;
overflow-y:auto;
}
}
@media (min-width:992px) {
#main-images {
position:fixed;
width:50%;
}
}
@media (min-width:992px) {
#secondary-images {
position:relative;
left:50%;
width:50%;
}
}
.carousel-inner > .item {
height:800px;
}
.carousel-inner > .item.car-slide-1 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
.carousel-inner > .item.car-slide-2 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1.1_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
.carousel-inner > .item.car-slide-3 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1.2_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
I specified the height as 800px just for example, but they are and you should use Javascript to determine the height of the .carousel-inner > .item
This should be pretty close to what they are doing, just not exactly because they are using a different carousel. What I did you could do in the BSS app using drag/drop. The only thing is that the carousels images that are directly in the carousel it's self I used a 1px by 1px transparent pixel.gif images for each carousel item's image so that I could use a background image instead.
Saj
Looks like it's a fixed sidebar. There's JS in a custom.js file that has script in it for a fixed sticky sidebar. Could that be it?
Yeah looks like that's what they are doing. So I guess +1 for me to not using custom js to do all that :D
Saj
I see what they did now. The parent DIV that I have for .std has padding-top because they position:fixed the top section and they also padding-left:50% that's how they pushed it to the right. Boo.
Updated possible HTML so you can see how to do something like what they did using the BSS app.
<div class="page--header">
<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>
</div>
<div class="page--main">
<div class="std">
<div id="main-images" class="adjustHeight">
<div data-ride="carousel" class="carousel slide" id="carousel-1">
<div role="listbox" class="carousel-inner">
<div class="item adjustHeight car-slide-1 active"><img src="pixel.gif" alt="Slide Image" /></div>
<div class="item adjustHeight car-slide-2"><img src="pixel.gif" alt="Slide Image" /></div>
<div class="item adjustHeight car-slide-3"><img src="pixel.gif" alt="Slide Image" /></div>
</div>
...
</div>
</div>
<div class="row no-gutter" id="secondary-images">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<div class="col-md-12">
<footer>
...
</footer>
</div>
</div>
</div>
</div>
Notice, I added the class adjustHeight to the #main-images
and to the .item
's of the carousel. That is what the JS code will adjust the height so it fills the browser.
Updated CSS
.page--header .navbar {
margin-bottom:0;
}
.row.no-gutter {
margin-left:0;
margin-right:0;
}
.no-gutter [class*="col-"] {
padding-left:0;
padding-right:0;
}
.page--main {
padding-top:50px;
}
@media (min-width:992px) {
.page--main {
padding-left:50%;
}
}
@media (min-width:992px) {
.std {
overflow-y:auto;
}
}
@media (min-width:992px) {
#main-images {
position:fixed;
width:50%;
left:0;
}
}
.carousel-inner > .item {
height:800px;
}
.carousel-inner > .item.car-slide-1 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
.carousel-inner > .item.car-slide-2 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1.1_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
.carousel-inner > .item.car-slide-3 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1.2_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
JS code to adjust the Height
var headerOffset = $('.page--header').height();
$(window).on("resize",function(e){
headerOffset = $('.page--header').height();
});
function setMainImageHeight() {
var fixedImage = $('.adjustHeight');
if (fixedImage.length > 0) {
fixedImage.css('height', function() {
var headerHeight = headerOffset;
var elemNewHeight =$ (window).height() - headerHeight;
return elemNewHeight + 'px';
});
}
}
$(window).on("load resize",function(e){
setMainImageHeight();
});
It's basically the JS code they are using for that part.
Saj
Hey Saj, thank you! I will try to get thru your idea and return with the results.
Saj, thank you very much!
Everything is running like a breeze. Here's the final Result: http://nv-test.bss.design
The only thing that i add to the code:
.carousel-indicators {
bottom:100px;
}
It was bellow to the page and not showing at MD and LG...
Thank you again!
Glad I can help, just hope it's something you can learn from. I know I did learn a little more from doing it.
Saj
So I took a look at something, and this piece of CSS is not actually needed. It might give a better browser scroll not being there.
@media (min-width:992px) {
.std {
overflow-y:auto;
}
}
You can remove that as I have tested that it doesn't negatively effect anything therefore it's not necessary. I think in IE/Edge it removes the extra pixel of white space I was noticing when you scroll all the way down just under the footer.
Saj
Yes, that's for sure!
Thanks again bro!