为了账号安全,请及时绑定邮箱和手机立即绑定

替换html后重新加载flickity

替换html后重新加载flickity

Helenr 2023-10-24 15:51:53
我运行了多个 flickity,它在第一个 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;}
查看完整描述

1 回答

?
慕仙森

TA贡献1827条经验 获得超7个赞

我认为您最好使用调整大小


查看完整回答
反对 回复 2023-10-24
  • 1 回答
  • 0 关注
  • 63 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信