<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Простейший слайдер на чистом JavaScript

Простейший слайдер на чистом JavaScript

Доброго времени суток! В данной статье я покажу Вам как сделать простейший слайдер на чистом JavaScript

Итак, код:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простой слайдер изображений</title>

    <style>
        #slider-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #image {
            width: 500px;
            height: 300px;
        }
    </style>

</head>

<body>

    <div id="slider-container">
        <button id="previous">Предыдущее</button>
        <img id="image" src="images/image1.jpg" />
        <button id="next">Следующее</button>
    </div>

    <script>
        // Массив с URL изображений
        const imagesUrls = [
            "images/image1.jpg",
            "images/image2.jpg",
            "images/image3.jpg",
        ];

        // индекс для отслеживания текущей картинки
        let currentIndex = 0;

        // Устанавливаем начальное изображение
        const imageElement = document.querySelector("#image");
        imageElement.src = imagesUrls[currentIndex];

        // Функция, отвечающая за переход к следующему изображению
        function nextImageHandler() {
            // Увеличиваем индекс текущего изображения
            currentIndex++;

            // Если текущий индекс больше длины массива изображений, устанавливаем его обратно в 0
            if (currentIndex >= imagesUrls.length) {
                currentIndex = 0;
            }

            // Показываем следующее изображение
            imageElement.src = imagesUrls[currentIndex];
        }

        //  Функция, отвечающая за переход к предыдущему изображению
        function previousImageHandler() {
            // Уменьшаем индекс
            currentIndex--;

            // Если текущий индекс меньше 0, устанавливаем его на последний индекс массива изображений
            if (currentIndex < 0) {
                currentIndex = imagesUrls.length - 1;
            }

            // Показываем предыдущее изображение
            imageElement.src = imagesUrls[currentIndex];
        }

        // Устанавливаем обработчики изображений на кнопки
        const nextButton = document.querySelector("#next");
        nextButton.addEventListener("click", nextImageHandler);

        const previousButton = document.querySelector("#previous");
        previousButton.addEventListener("click", previousImageHandler);
    </script>

</body>

</html>

Таким образом, в примере выше представлен простейший слайдер, который можно стилизовать так, как требуется в конкретном случае.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.