替换后重新加载 flickity html
Reload flickity after replace html
我 运行 多次闪烁,在第一个 html 代码中它是正确的 运行。虽然 .boxgallery
替换为新的 html .boxgallery
单击按钮后,不正确 运行 flickity.
我该怎么办? (未更改 replaceWith 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>
我 运行 多次闪烁,在第一个 html 代码中它是正确的 运行。虽然 .boxgallery
替换为新的 html .boxgallery
单击按钮后,不正确 运行 flickity.
我该怎么办? (未更改 replaceWith 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>