HTML5 Carousel不适合ASP.NET MVC

Question

所以我使用了我在html5up.net中看到的HTML5模板的轮播部分，我把它放在我正在使用asp.net mvc的网站上。它有效，但是当我向右箭头移动时，旋转木马的最后一个内容只显示了1/4。我不知道为什么。我不确定问题是否在CSS中。所以这是旋转木马的CSS代码。帮帮我吧。

02 Apr 2015

Index.cshtml：

/* 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;
                    }

    }