Severity: Warning
Message: preg_match(): Compilation failed: unmatched closing parenthesis at offset 38
Filename: hooks/Check_user.php
Line Number: 222
Backtrace:
File: /home/u377916119/domains/myprojecthd.in/public_html/application/hooks/Check_user.php
Line: 222
Function: preg_match
File: /home/u377916119/domains/myprojecthd.in/public_html/application/hooks/Check_user.php
Line: 89
Function: getOS
File: /home/u377916119/domains/myprojecthd.in/public_html/application/hooks/Check_user.php
Line: 12
Function: anylisis
File: /home/u377916119/domains/myprojecthd.in/public_html/index.php
Line: 315
Function: require_once
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
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