@azhgvn

Почему не работают кнопки на слайдере?

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400i" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

  <body>
    <div id="block-for-slider">

      <div id="viewport">

        <ul id="slidewrapper">

          <li class="slide">
            <img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="1" class="slide-img">
            <p>Пусть всегда будет вкусно!</p>

            <div class="window">
              <p>— КУЛИНАРНЫЙ КЛУБ —</p>
              <p>Создай свой кулинарный шедевр вместе с соусами Камако</p>
            </div>

            <div id="button">
              <a href="">УЗНАТЬ БОЛЬШЕ</a>
            </div>
          </li>

          <li class="slide">
            <img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="2" class="slide-img">
          </li>

          <li class="slide">
            <img src="https://pp.userapi.com/c849532/v849532174/1edc9/P8GoQZrNnos.jpg" alt="3" class="slide-img">
          </li>

        </ul>

        <div id="prev-next-btns">
          <i id="prev-btn" class="fas fa-angle-left"></i>
          <i id="next-btn" class="fas fa-angle-right"></i>
        </div>

        <div class="nav_btn">
          <input type="radio" name="slider" id="button1" checked>
          <input type="radio" name="slider" id="button2">
          <input type="radio" name="slider" id="button3">
          <label id="hw1" for="button1"></label>
          <label id="hw2" for="button2"></label>
          <label id="hw3" for="button3"></label>
        </div>

      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<code lang="css">
#block-for-slider {
    position: fixed;
    width: 100%;
    margin: 0 auto;
}

#viewport {
    width: 100%;
    display: table;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#slidewrapper {
    position: relative;
    width: calc(100% * 4);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

#slidewrapper ul, #slidewrapper li {
    margin: 0;
    padding: 0;
}

#slidewrapper li {
    width: calc(100%/4);
    list-style: none;
    display: inline;
    float: left;
    position: relative;
}

.slide img {
    width: 100%;
}

.slide>p {
    position: absolute;
    top: 25px;
    left: 535px;
    color: white;
    font: italic 400 22px 'Noto Serif', serif;
}

.window {
    background-color: white;
    width: 600px;
    height: 250px;
    border-radius: 5px;
    position: absolute;
    left: 390px;
    top: 120px;
}

.window>p:first-child {
    text-align: center;
    padding: 5px;
    font-family: "Museo Sans Cyrl 900";
    font-size: 14px;
    margin-top: 30px;
    letter-spacing: 4px;
    color: #fab330;
}

.window>p:last-child {
    text-align: center;
    font: italic 400 30px 'Noto Serif', serif;
    font-size: 30px;
    color: #282828;
}

#button>a {
    border: 1px solid #fab330;
    border-radius: 4px;
    background-color: #fab330;
    color: white;
    text-decoration: none;
    padding: 15px 35px;
    position: absolute;
    left: 580px;
    top: 300px;
    letter-spacing: 4px;
    font-family: "Museo Sans Cyrl 900";
    font-size: 12px;
    cursor: pointer;
}

#button>a:hover {
    text-decoration: none;
    color: white;
}

#prev-btn, #next-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 30px;
    border-radius: 50%;
    top: calc(50% - 35px);
}

#prev-btn:hover, #next-btn:hover {
    cursor: pointer;
}

#prev-btn {
    left: 20px;
}

#next-btn {
    right: 20px;
}

.nav_btn {
    position: absolute;
    width: 100%;
    bottom: 20px;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav_btn input {
    display: none;
}

.nav_btn label {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    margin: 3px;
    padding: 5px;
}

#button1:checked ~ #hw1,
#button2:checked ~ #hw2,
#button3:checked ~ #hw3 {
    background: #fff;
}
</code>

<code lang="javascript">
$(document).ready(function() {
    var slideNow = 1;
    var slideCount = $('#slidewrapper').children().length;

    function nextSlide() {
        if (slideNow === slideCount || slideNow <= 0 || slideNow > slideCount) {
            $('#slidewrapper').css('transform', 'translate(0, 0)');
            slideNow = 1;
        } 
        else {
            translateWidth = -$('#viewport').width() * (slideNow);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow++;
        }
    }

    var translateWidth = 0;

    var slideInterval = 7500;



    var switchInterval = setInterval(nextSlide, slideInterval);

    $('#viewport').hover(function(){
        clearInterval(switchInterval);
    },function() {
        switchInterval = setInterval(nextSlide, slideInterval);
    });

    function prevSlide() {
        if (slideNow === 1 || slideNow <= 0 || slideNow > slideCount) {
            translateWidth = -$('#viewport').width() * (slideCount - 1);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow = slideCount;
        } else {
            translateWidth = -$('#viewport').width() * (slideNow - 2);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow--;
        }
    }

    $('#next-btn').click(function() {
        nextSlide();
    });

    $('#prev-btn').click(function() {
        prevSlide();
    });

    var navBtnId = 0;

    $('.nav_btn').click(function() {
        navBtnId = $(this).index();

        if (navBtnId + 1 !== slideNow) {
            translateWidth = -$('#viewport').width() * (navBtnId);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow = navBtnId + 1;
        }
    });
});
</code>
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
TekLabs Санкт-Петербург
от 175 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.