Что не так в моем коде? Я делаю все правильно, как было сказано в инструкциях, однако bxslider не отображается правильно; каждый слайд появляется под другим.
И у меня есть еще одна проблема, я попытался сделать background-image заголовка, чтобы заполнить окно этим кодом: var myHeader = $('.header');
myHeader.height($(window).height());
$(window).resize(function() {
myHeader.height($(window).height());
});`
, но изображение не заполняет окно. Почему?
Вот код моего сайта:
/*global $, alert, console*/
$(function () {
'use strict';
// Adjust Header Height
var myHeader = $('.header');
myHeader.height($(window).height());
$(window).resize(function() {
myHeader.height($(window).height());
});
// Links Add Active Class
$('.links li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
// Trigger The Bx Slider
$('.bxslider').bxSlider();
});
/* Start Global */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
height: 2000px;
}
.container {
width: 1200px;
margin: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* End Global */
/* Start Navbar */
.navbar {
font-size: 20px;
height: 0;
color: #FFF;
position: relative;
z-index: 2;
}
.navbar .brand {
float: left;
width: 40%;
text-transform: uppercase;
}
.navbar .links {
float: left;
width: 60%;
margin-top: 15px;
border-bottom: 2px solid transparent;
}
.navbar .links li {
display: inline-block;
padding: 10px 0px;
margin: 0 10px;
font-weight: bold;
}
.navbar .links li.active,
.navbar .links li:hover {
color: #1abc9c;
border-bottom: 2px solid #1abc9c;
}
/* End Navbar */
/* Start Header */
.header {
background: url('https://i.postimg.cc/vBKSR951/Web-design-development-dubai.jpg');
position: relative;
}
.header .overlay {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
color: #FFF;
z-index: 1;
}
/* End Header */
/* Start My Framework */
.clearfix {
clear: both;
}
/* Start My Framework */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Classic</title>
<!-- Bx Slider Css File -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"/>
<!-- My Css Files -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
</head>
<body>
<!-- Start Navbar -->
<div class="navbar">
<div class="container">
<div class="brand">
<h2>Classic</h2>
</div>
<ul class="links">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<!-- End Navbar -->
<!-- Start Header -->
<div class="header">
<div class="overlay">
<ul class="bxslider">
<li>
<h2>welcome to <span>Classic</span></h2>
<p>This is test paragraph number one</p>
</li>
</ul>
<ul class="bxslider">
<li>
<h2>welcome to <span>Tow</span></h2>
<p>This is test paragraph number tow</p>
</li>
</ul>
<ul class="bxslider">
<li>
<h2>welcome to <span>Three</span></h2>
<p>This is test paragraph number three</p>
</li>
</ul>
<ul class="bxslider">
<li>
<h2>welcome to <span>Four</span></h2>
<p>This is test paragraph number four</p>
</li>
</ul>
</div>
</div>
<!-- End Header -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</body>
</html>