Fatal编程技术网
  • jquery/
  • Jquery FlickCity:已选中。类无法查看图像

Jquery FlickCity:已选中。类无法查看图像

jquery html css twitter-bootstrap

Jquery FlickCity:已选中。类无法查看图像,jquery,html,css,twitter-bootstrap,flickity,Jquery,Html,Css,Twitter Bootstrap,Flickity,昨天我有一个用户不友好的旋转木马。然后我搜索其他灵活且响应迅速的旋转木马解决方案，幸好我得到了David DeSandro制作的Flickity旋转木马。现在，我在添加图像时遇到了一个问题。我看不到任何图片。原始文件位于此处。我的代码如下 <!DOCTYPE html> <html> <head> <title>Flickity</title> <!--Flickity--> <link re

昨天我有一个用户不友好的旋转木马。然后我搜索其他灵活且响应迅速的旋转木马解决方案，幸好我得到了David DeSandro制作的Flickity旋转木马。现在，我在添加图像时遇到了一个问题。我看不到任何图片。原始文件位于此处。我的代码如下

<!DOCTYPE html>
<html>

<head>
    <title>Flickity</title>
    <!--Flickity-->
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</head>

<body>
    <div class="gallery js-flickity" data-flickity='{ "autoPlay": true }'>
        <div class="gallery-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" /></div>
        <div class="gallery-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" /></div>
        <div class="gallery-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" /></div>
        <div class="gallery-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" /></div>
        <div class="gallery-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" /></div>
        <div class="gallery-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" alt="contrail" /></div>
        <div class="gallery-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" alt="golden hour" /></div>
    </div>
</body>

</html>
<style type="text/css">
/* external css: flickity.css */

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

body {
    font-family: sans-serif;
}

.gallery-cell {
    width: 28%;
    height: 200px;
    margin-right: 10px;
    background: #8C8;
    counter-increment: gallery-cell;
}

.gallery-cell.is-selected {
    background: #ED2;
}

/* cell number */

.gallery-cell:before {
    display: block;
    text-align: center;
    content: counter(gallery-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
}
</style>
<script type="text/javascript">
// external js: flickity.pkgd.js
</script>


轻快
/*外部css:flickity.css*/
* {
-webkit框大小：边框框；
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.画廊单元{
宽度：28%；
高度：200px；
右边距：10px；
背景#8C8；
计数器增量：库单元；
}
.gallery-cell.is-selected{
背景：#ED2；
}
/*细胞数*/
.画廊单元：之前{
显示：块；
文本对齐：居中；
内容：计数器（图库单元）；
线高：200px；
字号：80px；
颜色：白色；
}
//外部js:flickity.pkgd.js
感谢您提供的以下解决方案@Ricky这里是您给我的以下解决方案

第一条路。我只是删除
而只是在
img
元素中添加
class=“gallery cell”

<img class="gallery-cell" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" alt="contrail" />
您可以使用类
.gallery单元格
删除不必要的
，或者设置
位置：绝对；排名：0；左：0；宽度：100%；身高：100%
到您的
.gallery cell img
。谢谢，它工作正常@瑞奇

.gallery-cell:before {
    display: block;
    text-align: center;
   /* content: counter(gallery-cell);*/
    line-height: 200px;
    font-size: 80px;
    color: white;

    /*@Ricky  2nd Solution*/
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}