Flickity: is-selected class 无法查看图片

Question

昨天我有一个用户不友好的轮播。然后我搜索其他灵活且响应迅速的旋转木马解决方案，然后谢天谢地我得到了这个 Flickity 的旋转木马 David DeSandro 的一个有趣的轻弹。现在，我在添加图片时遇到了问题。我看不到任何图片。原始文件位于此处 http://codepen.io/desandro/pen/gbjzre。我的代码如下。

<!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>

Answer 1

感谢@Ricky 提供的以下解决方案，这是您提供给我的以下解决方案。

第一种方式。我只是删除 <div class="gallery-cell"> 而不是我只是在 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-cell:before

中添加代码

.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%;
}

Flickity: is-selected class 无法查看图片

Flickity: is-selected class cannot view image

html

css

jquery

twitter-bootstrap

flickity