Angular Carousel在每张幻灯片上旋转背景

时间:2017-09-06 17:12:16

标签: html css angular

重点是让来自此轮播的每张幻灯片都有自己的uniq背景图片网址。它必须用纯scss和HTML完成! 下面将给出我的代码示例!

这是我的scss:

.landing-section{
    padding: 9em 0 8em;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

    &#testimonials-bg{
        position: relative;
        width: 100%;
        background-image: url(/assets/images/landing/testimonials/testimonials-bg.jpg);
        .carousel-caption{
            position: relative;
            right: 0;
            bottom: 20px;
            left: 0; 
            z-index: 10;
            p{
                @keyframes fadein {
                    from {
                        opacity:0;
                    }
                    to {
                        opacity:1;
                    }
                }
                @-moz-keyframes fadein { /* Firefox */
                    from {
                        opacity:0;
                    }
                    to {
                        opacity:1;
                    }
                }
                @-webkit-keyframes fadein { /* Safari and Chrome */
                    from {
                        opacity:0;
                    }
                    to {
                        opacity:1;
                    }
                }
                @-o-keyframes fadein { /* Opera */
                    from {
                        opacity:0;
                    }
                    to {
                        opacity: 1;
                    }
                }
                animation: fadein 2s;
                -moz-animation: fadein 2s; /* Firefox */
                -webkit-animation: fadein 2s; /* Safari and Chrome */
                -o-animation: fadein 2s; /* Opera */
                font-size: 18px;
                line-height: 1.33;
                text-align: center;
                color: #ffffff;

                strong{
                    font-size: 20px;
                    font-weight: 300;
                    font-style: italic;
                    line-height: 1.5;
                    position: relative;
                    top: 5px;
                }
            }
        }
    }
}

:host /deep/ .carousel-indicators{
    bottom: -50px;
    li{
        width: 11px;
        height: 11px;
        background-color: transparent;
        border: solid 1px #00b5e2;
        border-radius: 50%;
        cursor: pointer;

        &.active{
            background-color: #00b5e2;
        }
    }
}

:host /deep/ .carousel{
    &.slide{
        outline: none;
    }
}

:host /deep/ .carousel-control-next,
:host /deep/ .carousel-control-prev {
    display: none;
}

这是HTML:

<section id="testimonials-bg" class="landing-section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-9">
        <ngb-carousel>
          <ng-template ngbSlide>
            <div class="carousel-caption">
              <p>“This is a great camera that is highly recommended. The video quality is superb, and I really mean that after owning Foscam and other camera brands for many years. The wide dynamic range feature that is barely emphasized here is one of best I have seen in a camera of this class. Whereas the old Foscam camera would wash out against the setting Sun on the horizon, this R2 camera shows an impressive contrast of the shot by blocking the otherwise blinding light. Really, really impressive.”
              <br/> <strong>— Jar, Oregon</strong> </p>
            </div>
          </ng-template>
          <ng-template ngbSlide>
            <div class="carousel-caption">
              <p>“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.”
              <br/> <strong>— Jar, Oregon</strong></p>
            </div>
          </ng-template>
          <ng-template ngbSlide>
            <div class="carousel-caption">
              <p>“This is a great camera that is highly recommended. The video quality is superb, and I really mean that after owning Foscam and other camera brands for many years. The wide dynamic range feature that is barely emphasized here is one of best I have seen in a camera of this class. Whereas the old Foscam camera would wash out against the setting Sun on the horizon, this R2 camera shows an impressive contrast of the shot by blocking the otherwise blinding light. Really, really impressive.”
              <br/> <strong>— Jar, Oregon</strong> </p>
            </div>
          </ng-template>
        </ngb-carousel>
      </div>
    </div>
  </div>
</section>

我的任务是让#testimonials-bg每张幻灯片都有自己的background-image纯css! 我认为它必须通过以下内容实现:host或/ deep / selectors,因为它在指标中实现。 请帮忙!谢谢!

0 个答案:

没有答案