CAROUSEL WITH MD-6 AND 100% HEIGHT?

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 enter image description here 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

1 Like

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!