Код:
<!--HTML-->
<script>
'use strict';
var multiItemSlider = (function () {
return function (selector, config) {
var
_mainElement = document.querySelector(selector), // основный элемент блока
_sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
_sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
_items = []; // массив элементов
// наполнение массива _items
_sliderItems.forEach(function (item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var position = {
getMin: 0,
getMax: _items.length - 1,
}
var _transformItem = function (direction) {
if (direction === 'right') {
if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
return;
}
if (!_sliderControlLeft.classList.contains('slider__control_show')) {
_sliderControlLeft.classList.add('slider__control_show');
}
if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
_sliderControlRight.classList.remove('slider__control_show');
}
_positionLeftItem++;
_transform -= _step;
}
if (direction === 'left') {
if (_positionLeftItem <= position.getMin) {
return;
}
if (!_sliderControlRight.classList.contains('slider__control_show')) {
_sliderControlRight.classList.add('slider__control_show');
}
if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
_sliderControlLeft.classList.remove('slider__control_show');
}
_positionLeftItem--;
_transform += _step;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function (e) {
if (e.target.classList.contains('slider__control')) {
e.preventDefault();
var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
_transformItem(direction);
}
};
var _setUpListeners = function () {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_sliderControls.forEach(function (item) {
item.addEventListener('click', _controlClick);
});
}
// инициализация
_setUpListeners();
return {
right: function () { // метод right
_transformItem('right');
},
left: function () { // метод left
_transformItem('left');
}
}
}
}());
var slider = multiItemSlider('.slider')
</script>
<script>
'use strict';
var multiItemSlider = (function () {
return function (selector, config) {
var
_mainElement = document.querySelector(selector), // основный элемент блока
_sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
_sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
_items = []; // массив элементов
// наполнение массива _items
_sliderItems.forEach(function (item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var position = {
getMin: 0,
getMax: _items.length - 1,
}
var _transformItem = function (direction) {
if (direction === 'right') {
if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
return;
}
if (!_sliderControlLeft.classList.contains('slider__control_show')) {
_sliderControlLeft.classList.add('slider__control_show');
}
if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
_sliderControlRight.classList.remove('slider__control_show');
}
_positionLeftItem++;
_transform -= _step;
}
if (direction === 'left') {
if (_positionLeftItem <= position.getMin) {
return;
}
if (!_sliderControlRight.classList.contains('slider__control_show')) {
_sliderControlRight.classList.add('slider__control_show');
}
if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
_sliderControlLeft.classList.remove('slider__control_show');
}
_positionLeftItem--;
_transform += _step;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function (e) {
if (e.target.classList.contains('slider__control')) {
e.preventDefault();
var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
_transformItem(direction);
}
};
var _setUpListeners = function () {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_sliderControls.forEach(function (item) {
item.addEventListener('click', _controlClick);
});
}
// инициализация
_setUpListeners();
return {
right: function () { // метод right
_transformItem('right');
},
left: function () { // метод left
_transformItem('left');
}
}
}
}());
var slider = multiItemSlider('.slider')
</script>
<!--НАЧАЛО-->
<div class="slider">
<div class="slider__wrapper">
<div class="slider__item">
<div class="guide">
<hello>Хей йо, вот мы и встретились в Сиэтле! Ты тут родился или случайно заехал? Потому что я планирую немного рассказать тебе об этом городе. <br>So, let's go!</hello>
<wiki>from wikipedia with love.</wiki>
<place>Location <i class="fa fa-map-marker" aria-hidden="true"></i>: Сиэтл, штат Вашингтон, округ Кинг</place>
<people>Population <i class="fa fa-users" aria-hidden="true"></i>: 744 955 чел.</people>
<weather>Weather <i class="fa fa-sun-o" aria-hidden="true"></i>: летом 20-25 C, зимой 0 -5 С.</weather>
<fk><i class="fa fa-star" aria-hidden="true"></i> Интересные факты</fk>
<ipl><i class="fa fa-map-signs" aria-hidden="true"></i> Места которые стоит посетить</ipl>
<!--ИНТЕРЕСНЫЕ ФАКТЫ-->
<div class="tmyk">
<yellow>-1- Сиэтл — это родина более 500 успешных компаний, среди которых такие гиганты как «Microsoft», «Boeing», «Amazon» и «Starbucks».</yellow>
<blue>-2- Именно в Сиэтле родился крутой гитарист Джимми Хендрикс, и жил Курт Кобейн <br>(кстати, ты все еще можешь посетить его дом).</blue>
<yellow>-3- В 1889 году в Сиэтле произошел "Великий пожар", который уничтожил весь деловой центр города, но не унес ни одной жизни.</yellow>
<blue>-4- Современный точно зафиксированный рекорд по одновременному участию в игре в снежки принадлежит жителям Сиэтла — 12 января 2013 года в битве приняли участие 5 834 человека.</blue>
<yellow>-5- Сиэтл был первым крупным американским городом с she-мэром. Bertha Knight Landes занимала этот пост с 1924 по 1928 г. <br>Она прославилась благодаря своей жесткой борьбе против коррупции <br>(начала свой «мэрский поход» с увольнения начальника полиции).</yellow>
<blue>-6- Огромный тролль живет под одним из мостов в пригороде Сиэтла. <br> В своей жутковатой ручище он держит фольксваген «жук»! Настоящий! Только уже окаменелый.</blue>
</div>
<!--ИНТЕРЕСНЫЕ МЕСТА-->
<div class="placesyms">
<!------- 1 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/MN4vEBp.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Если ты приехал в Сиэтл всего на один день, то отправляйся в самый контрастный район города — на Capitol Hill, где каждую весну проходит ежегодная драка подушками.
</div></div></div>
<!------- 2 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/6HAPuwo.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Держу в курсе, что Сиэтл окружен водой и горными хребтами. Озеро Вашингтон на востоке, заливы Элиот и Пьюджит-саунд (узкий залив Тихого океана) на западе, река Дуамиш впадает в залив с юга, а морской канал озера Мичиган разделяет город на две части. Каскадные горы возвышаются на востоке и тянутся на запад к Олимпийским горам.
</div></div></div>
<!------- 3 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/F9HCcDD.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Заглянув на Pike Place Market, ты встретишь множество посетителей с охапками фермерских овощей или букетами из сухоцветов. В этом году рынок отметил свой 100-летний юбилей. Купи натуральную косметику с араматом лаванды, съешь пикантное буррито, подыши запахом старых книг в букинисте. И лучше не затягивать с обедом, ведь тогда ты пропустишь грандиозное шоу, где торговцы свежей рыбы кидаются друг в друга своим же товаром!
</div></div></div>
<!------- 4 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/LpHcVKk.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
В дождливый день можно прошвырнуться по музеям Сиэттла, коих в городе уйма: Художественный музей, Художественный музей искусства Азии, Художественная галерея Генри о Фрэй, Парк Олимпийских скульптур, Музей Азиатского искусства Уинг Люка, Авиационный музей, Музей истории и промышленности. Город также может похвастаться большим количеством картинных галерей.
</div></div></div>
<!------- 5 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/3iqAFUY.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Discovery Park, самый большой парк в Сиэтле, занимает территорию в 216,51 га (а это чуть больше 408 полей для игры в американский футбол!). В парке представлено множество экосистем таких, как степь, леса, грубые почвы морского утеса и морского побережья. С вершины утеса открывается захватывающий дыхание вид на горные цепи, океан и город. В парке находятся прелестный старый маяк, индейский культурный центр «Дэйбрэйк стар» и Лоутонская военная крепость, которую отдают в гражданское пользование.
</div></div></div>
<!------- 6 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/T7L8Rg0.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Что это? А, всего на всего стена жевательной резинки — местная достопримечательность. Как ты мог заметить, она вся в жвачке, и грех тут не оставить и свой след. Началось все в 1993 году, когда стоящие в очереди студенты от скуки начали клеить сюда монеты при помощи жвачки. До 1999 года власти пытались бороться с этим безобразием, но потом сдались.
</div></div></div>
<!------- 7 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/cTPsj4Z.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Вашингтонский университет был основан в 1861 году и на сегодняшний день является одним из крупнейших на северо-западе США. Среди его выпускников восемь являются лауреатами Нобелевской премии. Университет размещен в нескольких зданиях. Особого внимания заслуживает библиотека Сюзалло, которая находится в неоготическом особняке.
</div></div></div>
<!------- 8 ------>
<div style="width: 578px; height: 87px; background-image: url(https://i.imgur.com/ud4U4xl.png); display:block; margin-left:1px;">
<div class="places">
<div class="places_text">
Columbia Center — самый грандиозный городской небоскреб, построенный по проекту Ч.Л. Линдси в 1985 году (почти 300 метров в высоту). Со стороны кажется, будто он состоит из трех башен — на самом деле это единая конструкция. На 73-м этаже Columbia Center находится смотровая площадка, откуда можно сделать эффектные фотографии. На 74-м и 75-м этажах размещены рестораны, конференц-залы и библиотека.
</div></div></div>
</div>
</div>
</div>
<div class="slider__item">
<div style="background:url(https://i.imgur.com/7jGf8ww.png); width:960px; height:600px;">
<div style="position: absolute;
margin: 67px 524px;
font-family: 'HelveticaBold';
text-transform: uppercase;
color: #eeeeee;
font-size: 14px;
width: 380px;
text-align: center;
text-shadow: 1px 1px #715728;">Ознакомься с правилами</div>
<div style="position: absolute;
margin: 24px 36px;
width: 889px;
color: #eeeeee;
text-align: justify;
font-family: 'Roboto';
font-size: 11px;
text-shadow: 1px 1px #273542;">Во избежание недоразумений и неприятных ситуаций, перед регистрацией на проекте администрация настоятельно рекомендует вам ознакомиться с правилами проекта, путеводителем и списком занятых внешностей. По всем возникающим вопросам вы можете обратиться в гостевую книгу или же в личные сообщения любого администратора.</div>
<div style="position: absolute;
margin: 103px 34px;
height: 469px;
overflow: auto;
padding-right: 14px;"><details>
<summary>Общие положения</summary>
<div class="rules2"><b>o1.</b> Внешность в гостевой за зарегистрированным профилем придерживается на двое суток. За гостем — на сутки. Срок брони можно продлить при регистрации. Если вы не успеваете подать анкету в отведенный срок, то администрацией проекта предусматривается продление внешности еще на двое суток.<br>
Если же вы сомневаетесь в своём выборе и придерживаете более одной внешности, срок брони второй внешности - 12 часов, по завершении которых бронь на нее истечет.<br>
<b>o2.</b> Дубли внешностей разрешены, в случае если персонажи являются близнецами, либо с разрешения игрока, за которым занята данная внешность. При этом больше двух игроков с одинаковой внешностью быть на форуме не может.<br>
<b>o3.</b> Рейтинг игры — nc-21, а это значит, что в игровых разделах могут встречаться явные сексуальные сцены, большое количество лексики непристойного и сексуального характера, сцены чрезмерного насилия.
</div>
</details>
<details>
<summary>Регистрация</summary>
<div class="rules2"><b>o1.</b> Регистрация на проекте допустима только под именем вашего персонажа, написанного латиницей.<br>
<b>o2.</b> Дубли имен и фамилий разрешены только в случае, если имя и фамилия не были выкуплены игроками форума. При этом, на каждое не выкупленное имя разрешается не более двух повторов, а на каждую не выкупленную фамилию не более одного повтора, если персонажи не состоят в близком родстве, когда одинаковая фамилия подразумевается изначально. Тем не менее, для вашего же удобства, администрация настоятельно рекомендует избегать повторов имен.</div>
</details>
<details>
<summary>Подача анкеты</summary>
<div class="rules2"><b>o1.</b> Зарегистрированному пользователю дается 3 дня на заполнение и подачу анкеты. Если вы не успеваете заполнить анкету в срок, следует оповестить об этом администрацию в гостевой или же одного из администраторов лично.<br>
<b>o2.</b> Ваша анкета может находиться на рассмотрении администрации не более 48 часов. Администрация оставляет за собой право просить внести правки в анкету, если содержание анкеты противоречит законам логики или же вызывает ряд вопросов у проверяющего администратора. Также в отдельном ряде случаев администрация оставляет за собой право отказать игроку в принятии без пояснения причины.<br>
<b>o3.</b> Заполнение анкеты проходит строго по шаблону, представленному в отдельной теме. Также название темы должно содержать имя вашего персонажа латиницей и его возраст. Анкеты, заполненные не по шаблону или не до конца, автоматически отправляются в архив.<br>
<b>o4.</b> Анкеты по заявкам на нужных персонажей перед проверкой администрацией предварительно одобряются заказчиком.
</div>
</details>
<details>
<summary>Заполнение профиля</summary>
<div class="rules2"><b>o1.</b> Игроку дается три дня для заполнения всех организационных тем после принятия анкеты. Помните, что написанная анкета не является постоянным гарантом занятия внешности и имени, если игрок не отметился в темах, следовательно, по истечению трех дней и при не заполненных организационных темах, внешность и имя автоматически считаются свободными.<br>
<b>o2.</b> Максимально допустимый размер аватара на форуме — 180*180 пикселей. Допускается использование анимированного изображения.
На статическом или анимационном изображении вашего аватара должна присутствовать выбранная вами внешность, за исключением времени проведения различных конкурсов и флешмобов на форуме. Запрещено использовать аватары с чужими внешностями, аватары порнографического характера, рисованные аватары, аватары с животными, из анимэ и т. Д. Такие аватары будут удаляться администрацией.<br>
Во избежание конфликтных ситуаций и недопонимания, администрация проекта просит вас указывать копирайт автора, если аватар или любой другой графический элемент был взят со сторонних ресурсов.<br>
<b>o3.</b> В подписи допускается использование статического и анимационного изображения. Запрещается использование подписей порнографического характера.<br>
<b>o4.</b> При игре в эпизодах альтернативной реальности смена аватара профиля, имени и личного звания происходит при помощи кода "маски".</div>
</details>
<details>
<summary>Игровой процесс</summary>
<div class="rules2"><b>o1.</b> Игра ведется в специально отведенных темах с реальной игрой (прошлое, настоящее и будущее) и альтернативной реальностью.<br>
<b>o2.</b> Игровые эпизоды создаются игроками в специально отведённых разделах по шаблону, представленному в них. Допускается внесение изменений в шаблон там, где это необходимо игрокам.<br>
<b>o3.</b> Любое нарушение личных границ чужого персонажа (убийство, ранение и т.д.) Запрещено без согласия последнего.<br>
<b>o4.</b> Объем и оформление постового содержимого в эпизодах не регулируется правилами.
</div>
</details>
<details>
<summary>Дополнительные профили</summary>
<div class="rules2"><b>o1.</b> Получить второго/третьего/четвертого персонажа (твинка) можно, выполнив ряд правил, прописанных в банке.<br>
После выполнения всех условий необходимо обратиться в тему вопросов к администрации для получения одобрения.<br>
Только после одобрения игрок может зарегистрировать профиль.<br>
<b>o2.</b> Важно: третий и четвертый персонажи предполагают наличие свежих постов от предыдущих персонажей и выполнение стандартных правил для получения роли.<br>
<b>o3.</b> Один игрок может иметь не более 4-х активных ролей. После оформления третьего персонажа игрок должен отдать любую свою внешность под дубль или выкупить ее (право выкупа внешности действует единожды). Четвертая внешность уходит под дубль без возможности выкупа. Если правила, описанные ниже, не соблюдаются, администрация форума имеет право отдать под дубль любую внешность, кроме выкупленной.<br>
</div>
</details>
<details>
<summary>Отсутствие и лоу</summary>
<div class="rules2"><b>o1.</b> После принятия анкеты игроку дается неделя на то, чтобы начать игру, в противном случае внешность будет считаться свободной, а профиль будет удален в ближайшую чистку.<br>
<b>o2.</b> При отсутствии последующих игровых постов более двух недель или при отсутствии игрока на форуме в течение недели без предупреждения, внешность может быть отдана под дубль. Если же игровых постов у игрока нет более трех недель, внешность идет на освобождение, а профиль будет удален в следующую чистку.<br>
<b>o3.</b> Если игрок отметился в специальной теме, предупредив тем самым администрацию о своем отсутствии, допустимый срок отсутствия составляет две недели. Максимально допустимый срок - месяц при наличии веских на то причин. После окончания срока отсутствия игроку дается три дня на восстановление игровой активности.
</div>
</details>
<details>
<summary>Наказания и удаления</summary>
<div class="rules2"><b>o1.</b> Во избежание конфликтных ситуаций и ситуаций, при которых бы нарушались правила данного проекта, администрация проекта оставляет за собой право и обязуется выносить предупреждения в случае несоблюдения игроком правил. При повторном предупреждении, администрацией может быть принято решение о вынесении наказания в зависимости от тяжести проступка, вплоть до бана.<br>
<b>o2.</b> Строго запрещены любые прямые или косвенные оскорбления, в том числе по причине личной неприязни или на почве различных разногласий. Конфликтные ситуации должны решаться в частном порядке в личных сообщениях или мессенджерах и не должны выноситься на всеобщее обозрение.<br>
<b>o3.</b> Чистка неактивных пользователей проводится раз в месяц. Список людей, попавших под угрозу удаления, публикуется в соответствующей теме.
</div>
</details>
<details>
<summary>Реклама</summary>
<div class="rules2"><b>o1.</b> Реклама осуществляется строго в соответствующих темах и разделах форума. <br>
<b>o2.</b> Реклама в личных сообщениях, игровых, внеигровых зонах и прочих открытых игрокам и гостям разделах запрещена и будет удаляться, а профилям и пользователям, за которыми будет замечена рассылка рекламы и спама в неположенных темах или разделах, будет запрещен доступ к форуму.<br>
<b>o3.</b>рекламные посты должны содержать в себе ссылки на сторонний проект, закрепленный за рекламной листовкой. В случае невзаимности рекламы пост с рекламой на нашем проекте будет удален.
</div>
</details></div></div>
</div>
</div>
<!-- КНОПКИ "НАЗАД" И "ВПЕРЁД" -->
<a class="slider__control slider__control_left" href="#" role="button"></a>
<a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
</div>
