Какие варианты существуют для решения слайдеровых проблем?

Существует несколько вариантов для решения проблем с созданием слайдеров:

1. Использование готовых слайдеров и библиотек: существуют многочисленные готовые решения, которые можно легко интегрировать в свой проект. Некоторые из популярных библиотек включают Slick, Swiper, Owl Carousel и другие.

2. Использование CSS и JavaScript: создайте слайдер собственноручно, используя CSS-анимации и JavaScript-события. Этот метод потребует некоторой экспертизы в программировании, но позволит вам полностью настроить слайдер под ваши нужды.

3. Поиск решений и помощь в сообществах: не стесняйтесь обратиться за помощью к опытным разработчикам или задать вопрос в соответствующих программистических сообществах, таких как Stack Overflow. Возможно, кто-то уже сталкивался с подобной проблемой и сможет помочь или предоставить советы.

4. Изучение документации и туториалов: многие библиотеки и программные инструменты имеют подробную документацию и руководства, которые могут помочь вам разобраться с созданием слайдеров. Ознакомьтесь с этим материалом и следуйте инструкциям шаг за шагом.

5. Анализ примеров и исследование исходного кода: исследуйте работающие примеры слайдеров и изучайте их исходный код. Это поможет вам лучше понять, как они работают и как можно решить свои проблемы.

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

<div class="navigation-auto">
    <div class="auto-btn1"></div>
    <div class="auto-btn2"></div>
    <div class="auto-btn3"></div>
    <div class="auto-btn4"></div>
</div> 

 <div class="navigation-manual">
    <label for="radio1" class="manual-btn"></label>
    <label for="radio2" class="manual-btn"></label>
    <label for="radio3" class="manual-btn"></label>
    <label for="radio4" class="manual-btn"></label>
</div>


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


Читаем код разметки:

<div class="slides">
    <!--radio buttons start-->
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <input type="radio" name="radio-btn" id="radio4">
    <!--radio buttons end-->

    <!--slide images start-->
    <div class="slide-first">
        <img src="https://placehold.co/800x500" alt="" >
    </div>

    <div class="slide">
        <img src="https://placehold.co/801x501" alt="" >
    </div>

    <div class="slide">
        <img src="https://placehold.co/802x502" alt="" >
    </div>

</div>


Вы видите здесь блок, у которого был бы класс .first, который ожидается в CSS?

Нет, его нет. Есть slide-first.

Классы разделяются пробелом, а не тире. Следовательно, нужно либо в CSS, либо в HTML внести правки, чтобы классы были одинаковые и код заработает.