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

前端之家收集整理的这篇文章主要介绍了javascript – Flickity不会在轮播中呈现第二个图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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云端硬盘停止让您从他们的服务器托管.

最佳答案
@H_502_28@你的.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%;
}
原文链接:https://www.f2er.com/html/426168.html

猜你在找的HTML相关文章