<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

Подпишитесь на мой канал на 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):

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