Question

<header id="home">
<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">

此代码影响我的其他轮播

<section class="carousel">
                <div class="reel">

所以我的问题是当我使用carousel slide第一个轮播第二个轮播停止工作时，所以如果我删除carousel slide第二个轮播开始工作，第一个停止。我的意思是幻灯片选项不工作...所以我不知道，我试图编辑.js .css文件，但旋转木马幻灯片类我找不到它或使它们彼此分开这里是来自其他旋转木马的代码（main.css）

.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: rgba(72, 57, 73, 0.5);
            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: rgba(239, 131, 118, 0.75);
        }

    .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;
        }

我应该添加ID吗？在这里，然后在html文件中调用它？或者我应该用#carousel＃而不是dot（。）替换.carousel？

2旋转木马混合在一起

0 个答案: