Question

我想使用我找到的HTML5模板的轮播部分，所以我把它放在我使用asp.net mvc的网站上。它可以正常工作，但是当我将鼠标悬停在右箭头上时，旋转木马的最后一个内容只显示了1/4。我不确定这是什么原因，如果它是CSS。所以这里是旋转木马的CSS代码。帮帮我吧。

/* Carousel */

    .carousel {
        position: relative;
        overflow: hidden;
        padding: 2em 0 2em 0;
        margin-bottom: 0;
    }

        .carousel .forward, .carousel .backward {
            position: absolute;
            top: 50%;
            width: 6em;
            height: 12em;
            margin-top: -6em;
            cursor: pointer;
        }

            .carousel .forward:before, .carousel .backward:before {
                content: '';
                display: block;
                width: 6em;
                height: 6em;
                border-radius: 100%;
                background-color: #6e6f74;
                position: absolute;
                top: 50%;
                margin-top: -3em;
                -moz-transition: background-color 0.35s ease-in-out;
                -webkit-transition: background-color 0.35s ease-in-out;
                -o-transition: background-color 0.35s ease-in-out;
                -ms-transition: background-color 0.35s ease-in-out;
                transition: background-color 0.35s ease-in-out;
                -webkit-backface-visibility: hidden;
            }

            .carousel .forward:after, .carousel .backward:after {
                content: '';
                width: 3em;
                height: 3em;
                position: absolute;
                top: 50%;
                margin: -1.5em 0 0 0;
                background: url("images/arrow.svg") no-repeat center center;
            }

            .carousel .forward:hover:before, .carousel .backward:hover:before {
                background-color: #0066cc;
            }

        .carousel .forward {
            right: 0;
        }

            .carousel .forward:before {
                right: -3em;
            }

            .carousel .forward:after {
                right: -0.25em;
            }

        .carousel .backward {
            left: 0;
        }

            .carousel .backward:before {
                left: -3em;
            }

            .carousel .backward:after {
                left: -0.25em;
                -moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                -ms-transform: scaleX(-1);
                transform: scaleX(-1);
            }

        .carousel .reel {
            white-space: nowrap;
            position: relative;
            -webkit-overflow-scrolling: touch;
            padding: 0 2em 0 2em;
        }

        .carousel article {
            display: inline-block;
            width: 18em;
            background: #fff;
            text-align: center;
            padding: 0 1em 3em 1em;
            margin: 0 2em 0 0;
            white-space: normal;
            opacity: 1.0;
            -moz-transition: opacity 0.75s ease-in-out;
            -webkit-transition: opacity 0.75s ease-in-out;
            -ms-transition: opacity 0.75s ease-in-out;
            transition: opacity 0.75s ease-in-out;
        }

            .carousel article.loading {
                opacity: 0;
            }

            .carousel article .image {
                position: relative;
                left: -1em;
                top: 0;
                width: auto;
                margin-right: -2em;
                margin-bottom: 3em;
            }

            .carousel article p {
                text-align: center;
            }

/* Wide */

    @media screen and (max-width: 1680px) {

        /* Carousel */

            .carousel {
                padding: 1.5em 0 1.5em 0;
            }

                .carousel .reel {
                    padding: 0 1.5em 0 1.5em;
                }

                .carousel article {
                    width: 18em;
                    margin: 0 1.25em 0 0;
                }

    }


/* Narrower */

    @media screen and (max-width: 840px) {


        /* Carousel */

            .carousel {
                padding: 1.25em 0 1.25em 0;
            }

                .carousel article {
                    width: 18em;
                    margin: 0 1em 0 0;
                }

    }

    @media screen and (max-width: 736px) {


        /* Carousel */

            .carousel {
                padding: 0.5em 0 0.5em 0;
            }

                .carousel .reel {
                    padding: 0 0.5em 0 0.5em;
                }

                .carousel article {
                    width: 14em;
                    padding-bottom: 2em;
                    margin: 0 0.5em 0 0;
                }

                    .carousel article .image {
                        margin-bottom: 2em;
                    }

    }

这里是.cshtml：

<!-- Carousel -->
<section class="carousel">
    <div class="reel">

        <article>
            <header>
                <h3><a href="#">Pulvinar sagittis congue</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Fermentum sagittis proin</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Sed quis rhoncus placerat</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Ultrices urna sit lobortis</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Varius magnis sollicitudin</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Pulvinar sagittis congue</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Fermentum sagittis proin</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Sed quis rhoncus placerat</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Ultrices urna sit lobortis</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
            <header>
                <h3><a href="#">Varius magnis sollicitudin</a></h3>
            </header>
            <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

    </div>
</section>

HTML 5模板不适合ASP.NET MVC

0 个答案: