Задать вопрос
Профиль пользователя заблокирован сроком «навсегда» без указания причины
Ответы пользователя по тегу CSS
  • Как вернуть предыдущее изображение при повторном клике?

    @MidNightElf_1_10 Автор вопроса
    неуверенный в себе фронтендер который хочет в бэк
    $('.frame').vegas({
      preloadImage: true,
      autoplay: false,
      cover: true,
      transition: 'fade',
      transitionDuration: 250,
      slides: [
        {src: 'https://images.unsplash.com/photo-1583771803077-e512cbd2059c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'},
        {src: 'https://images.unsplash.com/photo-1583858815652-56b390b3a3e6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'},
        {src: 'https://images.unsplash.com/photo-1584605376366-63f17a36e99e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'},
        {src: 'https://images.unsplash.com/photo-1585432840537-b8bd65bc6b6a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'}
      ]
    });
    
    $('.toggle-slide').on('click', function() {
      //console.log($('.frame').vegas('current'));
      var c = $('.frame').vegas('current');
      var i = $('.toggle-slide').index(this);
      var p = parseInt($('.frame').data("prev"));
      if (i == c && !isNaN(p)) {
        $('.frame').vegas('jump', p);
        $('.frame').data("prev", "");
      } else {
        $('.frame').vegas('jump', i);
        $('.frame').data("prev", c);
      }
    });

    body {
      background: #333333;
    }
    .frame {
      width: 500px;
      height: 500px;
      border: 1px red solid;
    }
    main {
      width: 100vw;
      height: 100vh;
    }

    <main>
      <button class="toggle-slide">1</button>
      <button class="toggle-slide">2</button>
      <button class="toggle-slide">3</button>
      <button class="toggle-slide">4</button>
      <div class="frame"></div>
    </main>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
    Ответ написан
    Комментировать