<section class="wrapper">
<div class="slider" id="slide">
<div class="slider__wrapper">
<div class="slider__item">
<div style="height: 250px; background-image: url(img/slide1.jpg);">Слайд №1</div>
</div>
<div class="slider__item">
<div style="height: 250px; background-image: url(img/slide2.jpg);">Слайд №2</div>
</div>
<div class="slider__item">
<div style="height: 250px; background-image: url(img/slide3.jpg);">Слайд №3</div>
</div>
<div class="slider__item">
<div style="height: 250px; background-image: url(img/slide4.jpg);">Слайд №4</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>
</section>
<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo similique ad nisi deleniti vitae nihil minus error, temporibus sint distinctio, tempore quia perspiciatis ullam, qui eum iure quod. Sapiente eveniet eos odio animi nulla, reiciendis maiores dolore obcaecati error impedit consectetur, cupiditate numquam in officia fugiat harum quos non dolorem? Voluptates ex quis nostrum repellat eos sapiente dolore amet, reiciendis, assumenda ut illo. Id beatae non, voluptatem voluptates ipsam ab eius laudantium provident numquam necessitatibus porro dolorem soluta officiis, nemo ducimus rerum dicta vel modi, eum optio quos! Eos autem quod dolorum, quas, vel fugit aliquid laudantium consectetur doloremque rerum repellendus corporis nam possimus amet. Vel nostrum voluptas saepe distinctio adipisci ipsam, facilis magnam nam, quisquam sint vero libero vitae rem eos quo aperiam deleniti nihil exercitationem nesciunt veritatis earum dicta. Deserunt voluptatem voluptatibus esse, explicabo libero magni fugiat, doloremque, corrupti tenetur omnis facere nemo sequi maxime eos repudiandae voluptates!</div>
</div>
<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo similique ad nisi deleniti vitae nihil minus error, temporibus sint distinctio, tempore quia perspiciatis ullam, qui eum iure quod. Sapiente eveniet eos odio animi nulla, reiciendis maiores dolore obcaecati error impedit consectetur, cupiditate numquam in officia fugiat harum quos non dolorem? Voluptates ex quis nostrum repellat eos sapiente dolore amet, reiciendis, assumenda ut illo. Id beatae non, voluptatem voluptates ipsam ab eius laudantium provident numquam necessitatibus porro dolorem soluta officiis, nemo ducimus rerum dicta vel modi, eum optio quos! Eos autem quod dolorum, quas, vel fugit aliquid laudantium consectetur doloremque rerum repellendus corporis nam possimus amet. Vel nostrum voluptas saepe distinctio adipisci ipsam, facilis magnam nam, quisquam sint vero libero vitae rem eos quo aperiam deleniti nihil exercitationem nesciunt veritatis earum dicta. Deserunt voluptatem voluptatibus esse, explicabo libero magni fugiat, doloremque, corrupti tenetur omnis facere nemo sequi maxime eos repudiandae voluptates!</div>
</div>
.slider {
position: relative;
overflow: hidden;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 50%;
max-width: 50%;
}
.slider__control {
position: absolute;
top: 50%;
display: none;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
height: 50px;
transform: translateY(-50%);
background: rgba(0, 0, 0, .5);
}
.slider__control_show {
display: flex;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.slider__control_right::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.slider__item>div {
line-height: 250px;
font-size: 50px;
text-align: center;
}
'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')
Приложение 5 (HTML, CSS и PHP коды для формы обратной связи)
<form name="form" action="mail.php" method="post" id="form_message">
<h2>Форма обратной связи.</h2>
<p> <div class="titles">Ваше имя*</div> <input class="input" name="name" type="text"/> </p>
<p> <div class="titles">Электронная почта*</div> <input class="input" name="email" type="text"/> </p>
<p> <div class="titles">Тема сообщения</div> <input class="input" name="subjects" type="text"/> </p>
<p> <div class="titles">Текст сообщения:</div><textarea name="message" cols="22" rows="5" /></textarea></p>
<p><input id="submit" value="Отправить" type="submit" /></p>
</form>
<script src="script.js"></script>
.titles{
width: 140px;
display: flex;
justify-content: center;
flex-direction: column;
}
#form_message{
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-radius: 5px;
margin:10px;
padding: 10px;
width: 300px;
height:300px;
}
#form_message input,textarea{
border-radius: 5px;
width: 170px;
}
#submit{
height: 50px;
float: right;
}
#form_message h2{
text-align: center;
}
<meta charset="UTF-8" />
<?php
if (isset($_POST['name']) && $_POST['name'] != "")//если существует атрибут NAME и он не пустой то создаем переменную для отправки сообщения
$name = $_POST['name'];
else die ("Не заполнено поле \"Имя\"");//если же атрибут пустой или не существует то завершаем выполнение скрипта и выдаем ошибку пользователю.
if (isset($_POST['email']) && $_POST['email'] != "") //тут все точно так же как и в предыдущем случае
$email = $_POST['email'];
else die ("Не заполнено поле \"Email\"");
if (isset($_POST['subjects']) && $_POST['subjects'] != "")
$sub = $_POST['subjects'];
else die ("Не заполнено поле \"Тема\"");
if (isset($_POST['message']) && $_POST['message'] != "")
$body = $_POST['message'];
else die ("Не заполнено поле \"Сообщение\"");
$address = "Cheburilka@gmail.com";//адрес куда будет отсылаться сообщение для администратора
$mes = "Имя: $name \n"; //в этих строчках мы заполняем текст сообщения. С помощью оператора .= мы просто дополняем текст в переменную
$mes .= "E-mail: $email \n";
$mes .= "Тема: $sub \n";
$mes .= "Текст: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");//собственно сам вызов функции отправки сообщения на сервере
if ($send) //проверяем, отправилось ли сообщение
echo "Сообщение отправлено успешно! Перейти на <a href='#'</a>, если вас не перенаправило вручную.";
else
echo "Ошибка, сообщение не отправлено! Возможно, проблемы на сервере";
?>