Здравствуйте, я в веб-программировании не спец, и может моя ошибка очевидна но я её не вижу.
Дело в том что я написал слайдер с помощью jquery , пришло пару идей по поводу слайдера , и теперь уже его же переписываю на чистом js .
Решил сделать слайдер адаптивным: нужно выяснить ширину окна.
При написании alert(document.documentElement.clientWidth); в консоли на этом сайте выводится 1263, в при выводе этого же кода на моём LaddingPage выводится 1410.
Почему??
Html код
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/animate.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/wow.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="Arrow wow fadeInLeft" data-wow-delay=".2s">Э----------></p>
<p class="webText firstT wow fadeInLeftBig" data-wow-delay=".4s">Лучшие услуги</p>
<p class="webText secondT wow fadeInLeftBig" data-wow-delay="1s">По созданию сайтов</p>
<p class="webText thirdT wow fadeInLeftBig" data-wow-delay="1.6s">В Узбекистане</p>
<h1 class="whyAreWe">Наши преимущества</h1>
<!-- Слайдер -->
<div class="sliderWrap">
<div class="slider">
<div class="fullWidthBlock">
<div class="firstBlock block">
<h2>Адаптивный дизайн</h2>
<p><img src="img/adap.png" alt="adap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem tempore nihil consequatur? Pariatur aperiam ratione facere exercitationem mollitia numquam. Distinctio natus perferendis accusantium praesentium, architecto, asperiores illo at ipsum veritatis fuga ullam laudantium hic recusandae ut rem placeat minima, eaque necessitatibus enim, libero cupiditateullam laudantium hic!</p>
</div>
</div>
<div class="fullWidthBlock">
<div class="secondBlock block">
<h2>Высокое качество</h2>
<p><img src="img/quality.png" alt="qiality">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem tempore nihil consequatur? Pariatur aperiam ratione facere exercitationem mollitia numquam. Distinctio natus perferendis accusantium praesentium, architecto, asperiores illo at ipsum veritatis fuga ullam laudantium hic recusandae ut rem placeat minima, eaque necessitatibus enim, libero cupiditateullam laudantium hic!</p>
</div>
</div>
<div class="fullWidthBlock">
<div class="thirdBlock block">
<h2>Доступные цены</h2>
<p><img src="img/price.png" alt="price">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem tempore nihil consequatur? Pariatur aperiam ratione facere exercitationem mollitia numquam. Distinctio natus perferendis accusantium praesentium, architecto, asperiores illo at ipsum veritatis fuga ullam laudantium hic recusandae ut rem placeat minima, eaque necessitatibus enim, libero cupiditateullam laudantium hic!</p>
</div>
</div>
</div>
</div>
<!-- /////////////// -->
<!-- //Навигация -->
<div class="nav">
<ul class="icons">
<div class="activeLine"></div>
<li class="adap icon active" data-num="1" data-line-pos="0"><img src="img/adap.png" alt="adap"></li>
<li class="quality icon " data-num="2" data-line-pos="170"><img src="img/quality.png" alt="qiality"></li>
<li class="price icon" data-num="3" data-line-pos="340"><img src="img/price.png" alt="price"></li>
</ul>
</div>
<!-- ............ -->
</div>
</div>
<script src="scripts/index.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
CSS
@import "../fonts/Alexander/alexander.css";
body{
background: url('../img/bg-img.png');
}
/*/*HEADER///////////////////////*/
.webText{
color:green;
font-size: 3em;
position: absolute;
font-family: 'Alexander';
}
.Arrow{
color:red;
font-size:6em;
padding:0;
margin:0 0 50px 40px;
}
.firstT{
right:276px;
top:10px;
}
.secondT{
right:105px;
top:55px;
}
.thirdT{
right: 60px;
top: 100px;
}
/*/////////////////////////////////*/
.sliderWrap{
overflow:hidden;
margin:auto;
}
.slider{
position: relative;
left:0;
transition:left 1.1s;
}
.block{
width:60%;
min-width:350px;
margin:auto;
font-family: 'Alexander';
float: left;
}
.block>h2{
font-size:2em;
color:gray;
margin:10px auto auto 40px;
}
.block>p{
color:yellow;
font-size:2em;
font-weight:normal;
float: left;
}
.block>p>img{
width:400px;
float: left;
}
.needWidth{
width:100%;
}
/*/////////////////////////////////*/
.whyAreWe{
font-size:4em;
margin-left:100px;
color:aqua;
font-family: 'Alexander';
font-weight: bold;
}
.icons{
margin:auto;
width:510px;
}
.icons>li{
float: left;
margin:5px 10px;
}
.icons>li>img{
width:150px;
height: 150px;
border-radius:50%;
}
.clearFix{
clear:both;
}
.activeLine{
width:170px;
border:2px solid orange;
position: relative;
left: 0;
transition:left 1.1s;
}
