Вероятно, простое решение - Сбросить Flickity Slides Vanilla JS - PullRequest
Новая
       81

Вероятно, простое решение - Сбросить Flickity Slides Vanilla JS

0 голосов
/ 18 марта 2020

для моего портфолио, я использую Flickity. При нажатии на отдельные плитки, открывается модал с ползунком. Каждый триггер открывает один и тот же ползунок Flickity, но изменяет изображение sr c ячеек. Все идет нормально. Но если я открою ползунок с первым триггером и, например, передвину слайд 2, закрою его, запустлю 2,3,4 и т. Д., Откройте слайд 2. Из-за этого мне нужно сбросить ползунок или перейти к слайду 1, когда Я закрываю модальное. Я думаю, что это должно произойти в "hideslider ()". Я уже пробовал "flkty.reloadCells ();", но он не работает. Большое спасибо за вашу помощь.

Мой Ваниль JS

//get modal and flickity cells
var modal = document.getElementById("modal");
var cell1 = document.getElementById("cell1");
var cell2 = document.getElementById("cell2");
var cell3 = document.getElementById("cell3");
var cell4 = document.getElementById("cell4");

// Slider 01
var trigger1 = document.getElementById("trigger1");
trigger1.onclick = function() {
  cell1.src = "./_mat/gallery2/g2p1.png";
  cell2.src = "./_mat/portfolio_g1_t1_c2.jpg";
  cell3.src = "./_mat/portfolio_g1_t1_c3.jpg";
  cell4.src = "./_mat/portfolio_g1_t1_c4.jpg";
  showSlider();
};

// Slider 02
var trigger2 = document.getElementById("trigger2");
trigger2.onclick = function() {
  cell1.src = "./_mat/gallery2/g2p2.png";
  cell2.src = "URL";
  cell3.src = "URL";
  cell4.src = "URL";
  showSlider();
};

///////////////I've removed Slider 3-7 ;)

// Slider 08
var trigger8 = document.getElementById("trigger8");
trigger8.onclick = function() {
  cell1.src = "URL";
  cell2.src = "URL";
  cell3.src = "URL";
  cell4.src = "URL";
  showSlider();
};

// Slider 9
var trigger9 = document.getElementById("trigger9");
trigger9.onclick = function() {
  cell1.src = "URL";
  cell2.src = "URL";
  cell3.src = "URL";
  cell4.src = "URL";
  showSlider();
};

//function to hide modal and overlay
function hideSlider() {
  dark.style.visibility = "hidden";
  modal.style.visibility = "hidden";
  document.body.style.overflowY = "visible";
  flkty.reloadCells();
}

//function to show modal and overlay
function showSlider() {
  dark.style.visibility = "visible";
  modal.style.visibility = "visible";
  document.body.style.overflowY = "hidden";
}

1 Ответ

0 голосов
/ 25 марта 2020

После нескольких дней обдумывания я нашел решение.

  1. переменная "flkty" не была определена.

    var flkty = new Flickity(".carousel");

  2. Наконец, я использовал следующее решение для выбора первой ячейки. Документацию по API можно найти здесь: https://flickity.metafizzy.co/api.html

    flkty.select(0, false, true);

...