September 27, 2021

Free snippets bootstrap 4 slider

   <header class="pb-3">
    <div class="container">
        
        <div class="headerTop">
            <nav class="navbar navbar-expand-lg navbar-light bg-white bg-light p-0"> 
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navTop" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
              
                <div class="collapse navbar-collapse" id="navTop">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                      <a class="nav-link " href="#">Sourcing Solutions</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Services & Membership
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a> 
                      </div>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Help & Community</a>
                    </li>
                  </ul>
                 
                  <div class="form-inline my-2 my-lg-0">
                      <ul class="navbar-nav">
                          <li class="nav-item">
                            <a href="" class="nav-link"><i class="fa fa-user"></i> Sign In | Join Free</a>
                          </li>
                          <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-paper-plane"></i> Order</a></li> 
                          <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-heart"></i> Favorites</a></li> 
                      </ul>
                  </div>
                </div>
              </nav>
        </div>
        <div class="secondHeader">
            <div class="row align-items-center">
                <div class="col-lg-4"><div class="logo"><img src="logo.png" class="img-fluid" alt=""></div></div>
                <div class="col-lg-8">
                    <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text bg-white p-0 border-0 rounded-0">
                              <select name="" id="" class="form-control border-primary rounded-0">
                                  <option value="">Products</option>
                                  <option value="">Suppliers</option>
                              </select>
                          </span>
                        </div>
                        <input type="text" class="form-control border-top-primary border-primary">
                        <div class="input-group-append ">
                          <span class="input-group-text bg-white p-0 border-0 rounded-0"><button class="btn btn-primary rounded-0 ">Search</button></span>
                        </div>
                      </div>
                      
                </div>
            </div>
        </div> 
    </div>
</header>
<section class="slider">
        <div id="sliderMain" class="carousel slide" data-ride="carousel">

                <!-- Indicators -->
                <ul class="carousel-indicators">
                  <li data-target="#sliderMain" data-slide-to="0" class="active"></li>
                  <li data-target="#sliderMain" data-slide-to="1"></li> 
                </ul>
              
                <!-- The slideshow -->
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="banner-1.jpg" alt="">
                  </div>
                  <div class="carousel-item">
                    <img src="banner-2.jpg" alt="">
                  </div> 
                </div>
               
              </div>
</section>

 

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  
  <style>
    body { font-family: 'Poppins', sans-serif; background: #f7f8fa; }
header { box-shadow: 2px 2px 3px rgba(0,0,0,.1); position: relative; z-index: 99; background: #fff; margin-top: -5px; padding-top:4px  }
.logo img { max-width: 180px; }
.navbar { font-size: 14px; margin: 5px 0px;}
button.navbar-toggler {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 99999;
}
.form-control:focus, .form-control:active, .form-control:visited { box-shadow: none; }
.dropdown:hover>.dropdown-menu {
    display: block;
  }
  
  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
      pointer-events: none;
  }
  .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgb(255, 106, 0);}
  .dropdown-item { font-size: 14px;}  
  .btn:focus, .btn:visited, .btn:active { box-shadow: none;}
  .navbar-light .navbar-nav .nav-link {
    color: #333;
}
  /* slider */
.slider { margin-top: -3px; z-index: 9;     background: #fff;     position: relative;}
.slider img { width: 100%;}

  </style>

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *