Question

Hello社区我用我的滑块和位置绝对/相对的两个图像锁定？我用bxslider

你能帮我吗？

这是链接http://pier17.fr/beta-sanem/nos-realisations.html

这是我的代码HTML：

html,body       {width:100%;height:95vh;background-color: rgba(31,30,30,1); overflow:hidden;}
    .records        {width:99%; overflow-x:hidden; overflow-y:auto; display: table}
    .header-cell    {background:#3a3a3a;color:#ffffff;display:table-cell;border:1px solid #fff;}
    .cell {background:#cccccc;color:#494949;display:table-cell;border:1px solid #fff;}
    .header         {display: table-row;}
    .row1           {padding-top:4px;}

    /* scrollbars */
    ::-webkit-scrollbar {width: 5px;}   
    ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}    
    ::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
    ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
    /* scrollbars */
    ::-webkit-scrollbar {width: 5px;}   
    ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}    
    ::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
    ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

这是我的CSS：

                <div id="slider-realisations">
                    <ul class="bxslider">
                        <li>
                            <div class="slide-bloc">
                            <img  class="contour" src="img/contour-slide.png" alt="Maison Sanem">
                            <img  class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem">
                            </div>
                        </li>
                        <li>
                            <div class="slide-bloc">
                            <img  class="contour" src="img/contour-slide.png" alt="Maison Sanem">
                            <img  class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem">
                            </div>
                        </li>
                        <li>
                            <div class="slide-bloc">
                            <img  class="contour" src="img/contour-slide.png" alt="Maison Sanem">
                            <img  class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem">
                            </div>
                        </li>
                        <li>
                            <div class="slide-bloc">
                            <img  class="contour" src="img/contour-slide.png" alt="Maison Sanem">
                            <img  class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem">
                            </div>
                        </li>
                    </ul>
                </div>

如果一个人有解决方案，我已经准备好了。

非常感谢

Answer 1

问题是你的CSS。您必须以亲戚身份制作父母

foreach ($summary as $split) {
        if (isset($split['currency'])) {
            if (!isset($result[$split['currency']]) {
                $result[$split['currency']] = [
                    'duration' => 0,
                    'cost' => 0
                ];
            }
            $result[$split['currency']]['duration'] += $split['duration'];
            $result[$split['currency']]['cost'] += $split['cost'];
        } else {
            $result[0]['duration'] += $split['duration'];
            $result[0]['cost'] += $split['cost'];
        }
    }

让你的孩子绝对

.slide-bloc {
    position: relative;
}

Answer 2

问题解决了：

为CSS：

#slider-realisations {
        position: relative;
        overflow: hidden;
    }
    #slider-realisations .realisations img {
        width: 100%;
    }
    #slider-realisations .realisations img.contour {
        position: relative;
        z-index: 10;
        width: 100%;
        height: auto;
    }
    #slider-realisations .realisations img.slide-maison {
        position: absolute;
        z-index: 5;
        top: 0%;
        max-width: 100%;
        padding-right: 155px;
        padding-top: 107px;
        padding-left: 90px;
    }

对于HTML：

<div id="slider-realisations">
  <ul class="realisations">
    <li>
        <img  class="contour" src="img/contour-slide.png" alt="Maison Sanem">
        <img  class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem">
    </li>        <li>
        <img  class="contour" src="img/contour-slide.png" alt="Maison Sanem">
        <img  class="slide-maison" src="img/maison-realisation.jpg" alt="Maison Sanem">
    </li>
   </ul>

滑块与一个图像一个图像

2 个答案: