How to overlay image on a custom carousel? - html

I have a custom carousel from here.
I would like to overlay an image on the top left corner of the carousel.
I have searched all over but nothing works with my carousel because it always deforms it.
<!-- Carousel -->
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('images/c1.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/c2.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/c3.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="logo">
<img src="images/logo.png">
</div>
/* css */
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#logo{
position: absolute;
top: 0;
left: 0;
}
The image simply goes under the carousel, instead of overlaying it.
jfiddle

The logo is a class in your HTML code and in CSS it is selected as ID
so, the code will be:
.logo {
.....
}
instead of
#logo {
.....
}

No parent element is positioned appropriately (relatively). Wrap the code in a container and position the container relatively, and then the div(child of the wrapper) with the image inside of it will act accordingly. Or, stick the div inside the header so the logo div is the child of the header.

Related

Bootstrap Carousel Made Vertical

Im looking to change my bootstrap carousel to vertical rotation. Currently i have the carousel in html, the image sizing in css and the navigation left and right assigned to mouse scrolling in JS with the left right buttons disabled in visual studio.
Ive tried a whole different mix of fixtures online and non of it has worked.
<div id="carouselScrolling" class="carousel slide" data-ride="carousel">
<!--Lower Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(/images/carousel1.jpg);">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(/images/carousel2.jpg)">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(/images/carousel3.jpg)">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<!--Next Prev Buttons-->
#*<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>*#
</div>
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
$('#carouselScrolling').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
$(this).carousel('prev');
} else {
$(this).carousel('next');
}
});

Bootstrap 4.1 grid-layout is wider than the page

I'm using Bootstrap 4.1 for my page but when I insert a grid-layout, it's wider than the page, making the user scroll sideways to view the whole grid.
Page Before Grid-System:
https://ibb.co/y8RWGqY
Page After Grid-System:
https://ibb.co/LPP0TsL
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.logo {
position: absolute;
top: 0;
left: 0;
}
.logo img {
max-width: 150px;
max-height: 150px;
}
.titulo {
display: inline;
font-family: 'Montserrat', sans-serif;
font-size: 60px;
font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="logo">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
</div>
<br><br><br>
<main style="text-align: center;">
<div class="titulo">Quem somos</div>
</main>
<div class="row">
<div class="col-4" style="background-color: red;"><br><br><br><br><br></div>
<div class="col-8" style="background-color: blue;"><br><br><br><br><br></div>
</div>
As a mix of both solution, you should use container-fluid class to the grid container in order to make it 100% width.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4" style="background-color: red;"><br><br><br><br><br></div>
<div class="col-8" style="background-color: blue;"><br><br><br><br><br></div>
</div>
</div>
The only thing you have to remember is, you should put all your contents in a div with class of container or container-fluid. as bellow:
<div class="container">
your code goes here...
</div>
Please add container-fluid above of row div or you can also remove scroll without add container div so add m-0 class in row
<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="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('images/c1.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/c2.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/c3.jpg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="logo">
<img src="images/logo.png">
</div>
<br><br><br>
<main style="text-align: center;">
<div class="titulo">Quem somos</div>
</main>
<div class="container-fluid">
<div class="row">
<div class="col-4" style="background-color: red;"><br><br><br><br><br></div>
<div class="col-8" style="background-color: blue;"><br><br><br><br><br></div>
</div>
</div>

HTML carousel images crops instead of scaling on mobile

I can't get carousel images to scale instead of cropping on mobile version. I tried different solutions from web but non of them worked for me or i did something wrong. Am i just missing something or everything is wrong here?
Here's my html code for carousel:
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active img-responsive" href="index3.html" style="background-image: url('img/test2.jpg')" class="img-responsive img-cus">
<div class="carousel-caption d-none d-md-block" style="color:darkslategray;">
<h3>Producent kotłów 5 klasy</h3>
<p>Kocioł z podajnikiem dzięki specjalnym rozwiązaniom pozwala na uzyskanie bezdymnego spalania, niskiej emisji i sprawności co najmniej 89,9 %.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('./img/test.jpg')">
<div class="carousel-caption d-none d-md-block" style="color:white; ">
<h3 class="strokeme">Pełen profesjonalizm</h3>
<p class="strokeme">Działamy na rynku od 29 lat.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('./img/test3.jpg')"><a href="index3.html">
<div class="carousel-caption d-none d-md-block" style="color:red;">
<h3>Szeroka oferta</h3>
<p>Posiadamy kompletną ofertę kotłów według nowych norm</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
and here is css:
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: auto;
}
You are setting the vh, which means it will automatically scale so the image will fill things veritcally, but not care about the sides. Try setting the vw (view width) on the image to 100%

Carousel Image Sliding Out Becomes White on Safari using bootstrap 4 Angular 2

So there's like a tearing or flickering effect when the carousel slides left, as if the image disappears somewhere too far left, and a white space appears instead of it. I tried to add overflow: hidden or width: 100% but that didn't really work either.
The thing is, it works very well on Chrome; the effect only happens on Safari.
Here is my component scss and html files:
/* Make the carousel take the full screen height */
.fullscreen {
height: 100vh;
.carousel-inner {
.carousel-item {
height: 100vh;
}
}
}
<div id="landingCarousel" class="carousel slide fullscreen" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#landingCarousel" data-slide-to="0" class="active"></li>
<li data-target="#landingCarousel" data-slide-to="1"></li>
<li data-target="#landingCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="../assets/images/s1.jpg">
<div class="carousel-caption">
<h1 class="text-uppercase">Slide1</h1>
<p>Slide 1 text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="../assets/images/s2.jpg">
<div class="carousel-caption">
<h1 class="text-uppercase">Slide 2</h1>
<p>Slide 2 text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="../assets/images/s3.jpg">
<div class="carousel-caption">
<h1 class="text-uppercase">Slide 3</h1>
<p>Slide 3 text</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#landingCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#landingCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Bootstrap carousel fit screen width and height

I'm using the twitter-bootstrap feature carousel for a slider.
basically my homepage will be just a big slider with a nav bar and footer.
I was wondering if there's a way to make the slider fit the screen without the image to stretch ?
To be more specific I want the slider to fit the windows browser width and height without having to sacrifice my image aspect ratio. with my current code the slider fits the screen perfectly but the image is not adjusting it's self as it's trying to keep aspect ratio
See my JSFiddle for a clear idea of what's happening; I also pasted the code below.
HTML
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="item active">
<img class="fill" src="https://s16.postimg.org/5qy7h0v2d/Desert.jpg" alt="" />
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<!-- Slide 2 -->
<img class="fill" src="https://s11.postimg.org/d7rsly7xb/Hydrangeas.jpg" alt="" />
<div class="carousel-caption">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
CSS
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.test {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
}
Just if someone else might run into the same issue, I found a way to fix my slider.
I basically downloaded the Materialize plugin at the link below. All the information are included on their site, all you have to do is follow the instruction for the full screen slider which is located under javascrip, media.
http://materializecss.com/
Also here is an updated version of my JSFiddle in case someone might want to look and test the end result; I also past the code under.
HTML
<div class="slider fullscreen">
<ul class="slides">
<li>
<img src="https://unsplash.imgix.net/photo-1414924347000-9823c338079b?q=75&fm=jpg&s=0fa6db3cdc65e50c111575043fad4b5c"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
JAVASCRIPT
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
use !important :
.fill {
width: 100%;
height: 100%!important;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
https://jsfiddle.net/grnsyx0x/1/
Use this in your code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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://stuffpoint.com/apple/image/20832-apple-blue-apple.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg" 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>