html - 带有 HTML 的 CSS Slider 不工作 - 怎么办？

Question

您好，我的 CSS slider 不起作用。它应该看起来像这样:

但它看起来像这样:

我不知道要用我的 css 和 html 改变什么。

完整代码在这里:https://codepen.io/ay-the-reactor/pen/vYBbBVo

如果有人能帮上忙，我会很高兴

这里是一些代码:

<div class="image--box">
    <div class="image-border">
        {* Erstes Bild *}

        {if $sArticle.image}
            <input checked="checked" class="hidden" id="rSlide0" name="gallery2061" type="radio">
            <ul class="slides">
                <li id="slide0"><img src="{$sArticle.image.thumbnails[$bigImageIndex].source}"  alt="{$sArticle.articleName}" title="{$sArticle.articleName}" ></li>

            </ul>

        {/if}
        {* Weitere Bilder *}
        {if $sArticle.images}
            {foreach from=$sArticle.images item=sArticleImage name="imageCounter"}
                {if $smarty.foreach.imageCounter.iteration}
                    <div class="image--outer-frame">
                        <input type="radio" id="image{$smarty.foreach.imageCounter.iteration + 1}" name="cbax-gallery-target">
                        <div class="image--inner-frame">
                            <img class="not--dragable" src="{$sArticleImage.thumbnails[$bigImageIndex].source}"
                                 alt="{$sArticle.articleName}"
                                 title="{$sArticle.articleName}"
                            />
                        </div>
                    </div>


                {/if}
            {/foreach}
        {/if}
    </div>
    {if $sArticle.images}
        {* Thumbnails *}
        {include file="coolbax/ebay_template/{$theme.templateName}/frontend/thumbs.tpl"}
    {/if}
</div>

Answer 1

已编辑:看到您的链接后，试试这个 CSS:

@media only screen and (min-width: 48em) {
.image--box {
    width: 100% !important;
}}

它在 Chrome 检查器中工作。 删除边框:

.image--outer-frame .image--inner-frame img {
    border: none !important;
}

对于 Logo 问题:

@media only screen and (min-width: 48em) {
.product--supplier {
    height: auto;
}}