Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page bootstrap slider setup angular 8 project ) Part 13
home page bootstrap slider setup
In our previous tutorial, we had set up all the basic components of this project. In this tutorial, we will setup the bootstrap slider on the home page .in thsi tutorial we will use bootstrap 4 slider
Boostrap 4 Slider Script
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Carousel | My Project HD</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.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2 align="center" class="mt-2 mb-2"> Bootstrap 4 Carousel</h2>
<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://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&h=650&w=940%20940w,%20https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260%201260w,%20https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940%201880w,%20https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260%202520w" alt="Slide 1" style=" width: 80%; height: 400px; margin-left: 12%; ">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/919/night-dark-hotel-luxury.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Slide 2" style=" width: 80%; height: 400px; margin-left: 12%; ">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/974382/pexels-photo-974382.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="Slide 3" style=" width: 80%; height: 400px; margin-left: 12%; ">
</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></body>
</html>
For implement this slider on your angular 8 project in HomeComponent section you can open two file
- HomeComponent.html
- HomeComponent.css
1 . HomeComponent.html
<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="slider_img" src="https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&h=650&w=940%20940w,%20https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260%201260w,%20https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940%201880w,%20https://images.pexels.com/photos/2034335/pexels-photo-2034335.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260%202520w" alt="Slide 1" >
</div>
<div class="carousel-item">
<img class="slider_img" src="https://images.pexels.com/photos/919/night-dark-hotel-luxury.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Slide 2" >
</div>
<div class="carousel-item">
<img class="slider_img" src="https://images.pexels.com/photos/974382/pexels-photo-974382.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="Slide 3" >
</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>
2. HomeComponent.css
.carousel {
position: relative;
margin-left: -184px !important;
}
.slider_img{
width: 100%; height: 400px;
}
After use this step you can use ng server command for run your angular 8 project
