@MidNightElf_1_10
неуверенный в себе фронтендер который хочет в бэк

Как вернуть предыдущее изображение при повторном клике?

Делаю переключатель фоновых изображений, мне нужно сделать так чтобы при клике на кнопку переключался фон и при повторном клике на ту же кнопку он возвращал на фон предыдущее изображение. Код с codepen прикладываю
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
@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>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы