A PHP Error was encountered

Severity: Warning

Message: preg_match(): Compilation failed: unmatched closing parenthesis at offset 38

Filename: hooks/Check_user.php

Line Number: 217

Backtrace:

File: /home/b2z283hyjn3q/public_html/application/hooks/Check_user.php
Line: 217
Function: preg_match

File: /home/b2z283hyjn3q/public_html/application/hooks/Check_user.php
Line: 84
Function: getOS

File: /home/b2z283hyjn3q/public_html/application/hooks/Check_user.php
Line: 10
Function: anylisis

File: /home/b2z283hyjn3q/public_html/index.php
Line: 315
Function: require_once

Unknown 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 | My Project HD
X

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

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 

  1. HomeComponent.html
  2. 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