Bad Gateway 502 на html-странице в файле php
Я должен использовать PHP на моем сайте, поэтому я создал index.php файл и переместил весь контент из него index.html файл. Теперь я скопировал все без изменения кода в файл php, и когда я открываю страницу в браузере, она открывается нормально, и когда я обновляю ее сразу же, я получаю 502 Bad Gateway все время. Затем через некоторое время (более 5 минут) я снова обновляю страницу, она загружается нормально, как в первый раз, а затем снова, при обновлении, 502..,
Я пытался удалить некоторую часть html код, когда я пытался выяснить, что может быть причиной этого, потому что, когда код был в index.html все работало просто отлично. Я обнаружил, что когда я удаляю все содержимое <div class="tab-content"> ..content... </div>страница загружается без 502,
Это в значительной степени один и тот же код во всем, так как есть пара ползунков с изображением-заполнителем, но посмотрите на весь index.php файл, потому что я понятия не имею, что не так в той части, которую я удалил.
РЕДАКТИРОВАТЬ:
Я был в состоянии сузить это до этой части, которую я удалил, и страница не получает 502 - это содержание <div class="carousel-inner"> ..content.. </div>, Этот контент использует JavaScript, но я не понимаю, почему он дает мне 502? Я включаю это плохо или как?
<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link rel="stylesheet" href="css/homepage.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<!-- HEADER -->
<div class="container"><?php include 'header.php'; ?></div>
<div class="tab-content">
<!-- HOMEPAGE -->
<div id="homepage" class="tab-pane active container">
<div class="panel panel-primary">
<div class="panel-heading">Hry</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 hidden-xs">
<div class="carousel slide multi-item-carousel" id="theCarousel1">
<div class="carousel-inner">
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel1" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel1" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="col-md-12 visible-xs">
<div class="carousel slide multi-item-carousel-mob" id="theCarousel1m">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-2"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-2"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel1m" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel1m" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Knihy</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 hidden-xs">
<div class="carousel slide multi-item-carousel" id="theCarousel2">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="col-md-12 visible-xs">
<div class="carousel slide multi-item-carousel-mob" id="theCarousel2m">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel2m" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel2m" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Videa</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 hidden-xs">
<div class="carousel slide multi-item-carousel" id="theCarousel3">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel3" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel3" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="col-md-12 visible-xs">
<div class="carousel slide multi-item-carousel-mob" id="theCarousel3m">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel3m" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel3m" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HRY -->
<div id="hry" class="tab-pane container">
<div class="panel panel-primary">
<div class="panel-heading">Hry</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 hidden-xs">
<div class="carousel slide multi-item-carousel" id="theCarousel4">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel4" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel4" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="carousel slide multi-item-carousel-mob" id="theCarousel4m">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel4m" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel4m" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- KNIHY -->
<div id="knihy" class="tab-pane container">
<div class="panel panel-primary">
<div class="panel-heading">Knihy</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 hidden-xs">
<div class="carousel slide multi-item-carousel" id="theCarousel5">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel5" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel5" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="carousel slide multi-item-carousel-mob" id="theCarousel5m">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel5m" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel5m" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- VIDEA -->
<div id="videa" class="tab-pane container">
<div class="panel panel-primary">
<div class="panel-heading">Videa</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 hidden-xs">
<div class="carousel slide multi-item-carousel" id="theCarousel6">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel6" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel6" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="col-xs-12 visible-xs">
<div class="carousel slide multi-item-carousel-mob" id="theCarousel6m">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-6"><a href="#1"><img src="./images/placeholder.jpg" class="img-responsive"></a></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel6m" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel6m" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
<script src="js/tabs.js"></script>
<script src="js/carousel.js"></script>
</body>
</html>