How to reduce the image height in carousel slider - html

How to reduce the image height in carousel slide in bootstrap, but it must be responsive after reducing the image height.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/xactprofile1.png" class="d-block w-100 d-inline-block" alt="..." />
</div>
</div>
</div>


Try this. It changes height when you try to reduce the height based on this. Add it to your image.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>


Will changing the .carousel-inner height solve your problem? or it's not what you are looking for? because you could use for example height: 50vh and it will change the images too but the whole inner is effected with it. and images are going to stay responsive.
check out this snippet:
CSS:
.carousel-inner {
height: 50vh;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<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>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </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>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Related

Trying to get a carousel inside a carousel

I'm trying to make a carousel inside a carousel so I can dynamically load larger sections and have everything neatly organized, I am trying to hardcode a carousel inside a carousel for the time being however I am having issues with the third slide not displaying and I cant figure out why does anyone have any suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 25%;
height: 25%;
}
</style>
</head>
<body>
<div id="demo1" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo1" data-slide-to="0" class="active"></li>
<li data-target="#demo1" data-slide-to="1"></li>
<li data-target="#demo1" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner text-center" style="background-color: #3a3b45">
<div class="carousel-item active">
<img src="img/logo.png" alt="Los Angeles">
</div>
<div class="carousel-item">
<!--Carousel 2-->
<!--<img src="img/logo.png" alt="Los Angeles">-->
<div id="demo2" class="carousel slide" data-ride="carousel" data-interval="false">
<ul class="carousel-indicators mb-4">
<li data-target="#demo2" data-slide-to="0" class="active"></li>
<li data-target="#demo2" data-slide-to="1"></li>
<li data-target="#demo2" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/logo.png" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="img/logo.png" alt="Chicago">
</div>
<div class="carousel-item">
<img src="img/logo.png" alt="New York">
</div>
</div>
</div>
<!--Carousel 2 END-->
</div>
<div class="carousel-item">
<img src="img/logo.png" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo1" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo1" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>

Although it's mentioned in the documentation of bootstrap 4 that-
nested carousels are not supported
But, I'm trying, I wanted to do this a long time ago & now seeing your question made me re-try, I'll let you know here if I make it, till then you can start where I stopped today- (visit the link in the comment)
Best of luck.

how to allow my carousel slider image to be responsive

I was trying to recreate a navbar/header/slider like this https://matchthemes.com/demohtml/dina/index.html
However, I have an issue with my carousel slider image. It looks fine when it is in webpage form, but when I shrink it to a mobile form, my image does not resize to the same as my carousel slider. Below is an image of what I mean.
mobile form
website form
This is my HTML for the carousel slider
<section class="container-fluid carouselcontainer">
<section 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>
</ol>
<!-- Wrapper for slides -->
<section class="carousel-inner">
<section class="item active">
<img src="image/restaurant.jpg" alt="Los Angeles" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%; height:100%;">
</section>
</section>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</section>
</section>
This is my CSS. It's only 1 line. It is the only way I know to resize the carousel and the image
.carousel-inner {
width:100%;
height:830px;
}

You can use image in background with "background-image:url('..');" like
<section class="item active" style="background-image:url('https://www.w3schools.com/bootstrap/chicago.jpg');">
</section>
You need to some CSS in item class to adjust images what you want.
Example
.item{
width: 100%;
height: 100%;
background-repeat: no-repeat ;
background-size: cover ;
background-position: center ;
}

How about letting a browser pic the best image?
img {
max-width: 100%;
}
and read the following link
https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html
and use "img srcset"

This is Your Solution
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
You Can Edit or Preview Code Here Also Code Link

Try to make the width of your carousel image 100%
.carousel-inner .item img {
width: 100%;
}

I've made a carousel on my webpage, works fine on the computer, when I make it smaller but on mobile it stays stretched

I've made a carousel on my webpage, works fine on the computer, it follows it well when I make it smaller on the screen but on mobile it stays stretched vertically making it very long/high.
I've tried to change heights and all the other standard procedure but the confusing part is that it works so well on computer but not on mobile.
In my head that shouldn't be possible
.carousel {
max-height: 790px;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block !important;
}
.carousel img {
width: 100% !important;
max-height: 790px;
}
.carousel-inner {
width: 90% !important;
margin: auto !important;
}
<div style="max-width:100%" class="container">
<div class="row">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img\homeg1.jpeg" alt="First Picture">
</div>
<div class="carousel-item">
<img src="img\homeg3.jpeg" alt="Second Picture">
</div>
<div class="carousel-item">
<img src="img\homeg4.jpeg" alt="Third Picture">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>

All you need is the images to be responsive via the img-fluid class and you'll get a similar experience on Desktop and mobile...
I have removed your css... removed inline max-width:100% from the parent div... added img-fluid classes to the images
following code works for you?
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg" alt="First Picture">
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg" alt="Second Picture">
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg" alt="Third Picture">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>

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>

Why is my Bootstrap Carousel not working?

I am making a MEAN stack application using angular 7. I use a Bootstrap Carousel but it's not working.
#slider .item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide2">
<img src="../../assets/public/5.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide3">
<img src="../../assets/public/cardrive.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>
Is there any mistake I am doing with the code? I think #slider is not working in angular 7.

As I already explained here (marked as duplicate but nothing happened):
You have to give all items (pictures) of the carousel the class
carousel-item but you only gave them the class item. Same with the
Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave
them the class carousel-control.
The rest seems to be working just fine! When handling Bootstrap you
always have to look out for the classes since they have to be exactly
right for it to work at all. (You could also probably remove the
popper.js-script at the bottom since it is not used at all.)
So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control
classes as I did here:
#slider .carousel-item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
.carousel-item>img {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide2">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide3">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I have the same problem like that.
You must be careful to read again Getting Started carousel focused on Dependency.
https://ng-bootstrap.github.io/#/getting-started
Don't forget to add BootstrapCDN (content delivery network) in your HTML file:
https://www.bootstrapcdn.com/
this is my BootstrapCDN in my workspace:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>