Bootstrap Carousel Made Vertical - html

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');
}
});

Related

Bootstrap Carousel - Blurred Static Text Box

I am using the Bootstrap carousel, and I would like to add text that stays statically when you resize the window, and for mobile devices/tablets. I tried adding a H1 element, but it did not work correctly (moves about when resizing).
I have attached an image of how I would like it to look, with a blurred background so you can see the text as some images are of phones, and routers etc.
how I would like it to look
This is the code currently: (not sure if you need to see the CSS, or the java)
Please could someone assist me, pretty new to web development.
.carousel-item {
height: 70vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-caption {
width: 28em;
z-index: 10;
color: #fff;
text-align: center;
top: 50%;
left: 65%;
bottom: auto;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header>
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="3"></li>
<li data-target="#carouselIndicators" data-slide-to="4"></li>
<li data-target="#carouselIndicators" data-slide-to="5"></li>
<li data-target="#carouselIndicators" data-slide-to="6"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('phone.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
<div class="carousel-item" style="background-image: url('telecommunications.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
<div class="carousel-item" style="background-image: url('fibre.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
<div class="carousel-item" style="background-image: url('support.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
<div class="carousel-item" style="background-image: url('wire.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
<div class="carousel-item" style="background-image: url('5g.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
<div class="carousel-item" style="background-image: url('internet.jpeg')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4"></h2>
<p class="lead"></p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>

How to overlay image on a custom carousel?

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.

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>