Перезагрузить фликлы после замены html - PullRequest
Новая
       44

Перезагрузить фликлы после замены html

1 голос
/ 31 марта 2020

Я запускаю несколько Flickity, и он правильно запускается в первом html коде. в то время как .boxgallery заменяется новым html .boxgallery после нажатия на кнопку, неправильный прогон запуска.

что мне делать? (Без изменений заменить js) 

var $carousel = $('.gallery').flickity();
var isFlickity = true;
$('.button').on( 'click', function()
{
	//Clearing previous contents
	$carousel.flickity('destroy');
  
	$('.boxgallery').replaceWith('<div class="boxgallery"><div class="gallery"><div class="gallery-cell"></div><div class="gallery-cell"></div><div class="gallery-cell"></div></div></div>');

	// init new Flickity
	$carousel.flickity();
});
@import url(http://flickity.metafizzy.co/flickity.css);
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.gallery {
    width: 200px;
    background: #FAFAFA;
    margin-bottom: 30px;
    counter-reset: gallery-cell;
    float: right;
    margin: 10px;
}

.gallery-cell {
  width: 100%;
  height: 160px;
  margin-right: 20px;
  background: #8C8;
  counter-increment: gallery-cell;
}

.gallery-cell:before {
  content: counter(gallery-cell);
  display: block;
  text-align: center;
  line-height: 160px;
  font-size: 80px;
  font-weight: bold;
  color: white;
}

.gallery-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-nav li {
  display: inline-block;
  font-size: 20px;
  color: #09F;
  border: 1px solid;
  padding: 10px;
  margin-right: 5px;
}

.gallery-nav li.is-selected {
  background: #09F;
  color: white;
}

.gallery-nav li:hover {
  background: #ADF;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.min.css">

<button class="button">Re Create Flickity</button>

<div class="boxgallery">
  <div class="gallery">
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
  </div>

  <div class="gallery">
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
  </div>

  <div class="gallery">
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>
  </div>
</div>

DEMO: http://jsfiddle.net/74bcqf6x/

1 Ответ

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

Смотрите демоверсии destroy для включения и выключения Flickity. Но я думаю, что вам лучше использовать resize

...