javascript – Flickity不会在轮播中呈现第二个图像

发布时间：2020-12-14 22:57:01 所属栏目：资源来源：网络整理

导读：http://codepen.io/Thisisntme/pen/rVRyJE是对我网站的测试.我试图添加一个flickity轮播,由于某种原因它不会渲染div中的第二个图像.这是没有所有其他html和CSS的东西的旋转木马. http://codepen.io/Thisisntme/pen/waOeWa CSS： * { -webkit-box-sizing: bor

http://codepen.io/Thisisntme/pen/rVRyJE是对我网站的测试.我试图添加一个flickity轮播,由于某种原因它不会渲染div中的第二个图像.这是没有所有其他html和CSS的东西的旋转木马. http://codepen.io/Thisisntme/pen/waOeWa


CSS：

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
   padding: 50px 0px 0px 0px;

}

.gallery img {
  display: block;
  width: 100%;
  height:auto;
}

继承人证明图像链接很好
?
哦,没有jQuery.
编辑：对于那些仍然关心的人,图像不再起作用了. Google云端硬盘停止让您从他们的服务器托管.


最佳答案
你的.gallery-cell只需要100％的宽度,至少对我来说,你的img标签需要明确关闭.为了解决大小调整问题,我使用JS显式初始化了Flickity,而不是隐式使用HTML类.
JSFiddle：https://jsfiddle.net/3qr6hub1/2/

var flkty = new Flickity('.gallery');
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
   padding: 50px 0px 0px 0px;
}

.gallery-cell {
    width: 100%;
}

.gallery img {
  width: 100%;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!