
<!DOCTYPE html>
<html>
<head>
  <title>หน้าแรก</title>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">

  <link type="text/css" rel="stylesheet" href="css/component.css">
  <script type="text/javascript" src="js/modernizr.custom.js"></script>
</head>

<body >
  <nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-light" href="home.php">
              <h5>หน้าแรก</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="BMI.html">
              <h5>คำนวณหาดัชนีมวลกาย</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="Weight.html">
              <h5>คำนวณน้ำหนักที่เหมาะสม</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="Cal.html">
              <h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="search.php">
              <h5>ตารางแคลอรี่</h5>
            </a>
          </li>
        <a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
          <h5>Team</h5>
        </a>
        </ul>
      </div>
    </div>
  </nav>


  <div id="cbp-fwslider" class="cbp-fwslider">
    <ul>
      <li>
        <a href="#">
          <img src="images/1.jpg" alt="img1"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/2.jpg" alt="img2"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/3.jpg" alt="img3"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/4.jpg" alt="img4"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/5.jpg" alt="img5"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/6.jpg" alt="img6"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/7.jpg" alt="img7"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/8.jpg" alt="img8"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/9.jpg" alt="img9"> </a>
      </li>
      <li>
        <a href="#">
          <img src="images/10.jpg" alt="img10"> </a>
      </li>
    </ul>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/jquery.cbpFWSlider.min.js"></script>
  
  <script>
    $( function() {
      $( '#cbp-fwslider' ).cbpFWSlider();

    } );
  </script>

</body>

</html> 






























<!-- function carousel() {       ภาพสไลด์เอง
    var i;
    var x = document.getElementsByClassName("mySlides");  ชื่อภาพ
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
} -->