1

昨天我有一个用户不友好的轮播。然后我寻找其他灵活且响应迅速的轮播解决方案，然后谢天​​谢地，我让这个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>
4

1 回答 1

1

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

第一种方式。我只是删除了，<div class="gallery-cell">而是添加了class="gallery-cell"内部img元素。

<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%;
}
于 2017-04-20T06:43:18.080 回答