FTSE Russell Styleguide

Carousel 

<div class="carousel__container">
    <div class="carousel__inner container">
        <h3>Latest Announcements</h3>
        <div class="carousel siema">

            <div>
                <div class="carousel__item">
                    <article class="blog__card blog__card__with_image_portrait grid">
                        <div class="blog__card__image col-5">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                        </div>
                        <div class="blog__card__content col-7 grid">
                            <div class="blog__card__body">

                                <div class="blog__card__type">Test</div>

                                <h4 class="blog__card__title">
                                    <a href="#">Advisors see bright future for smart beta</a>
                                </h4>

                                <div class="blog__card__author">
                                    Rolf Agather
                                </div>

                            </div>
                            <div class="blog__card__footer grid">
                                <div class="blog__card__topic col col-6">
                                    <a href="#">#Lorem ipsum</a>
                                </div>
                                <div class="blog__card__date col col-6 text--right">February 26, 2018</div>
                            </div>
                        </div>
                    </article>

                </div>
            </div>

            <div>
                <div class="carousel__item">
                    <article class="blog__card blog__card__with_image_portrait grid">
                        <div class="blog__card__image col-5">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                        </div>
                        <div class="blog__card__content col-7 grid">
                            <div class="blog__card__body">

                                <div class="blog__card__type">Test</div>

                                <h4 class="blog__card__title">
                                    <a href="#">Advisors see bright future for smart beta</a>
                                </h4>

                                <div class="blog__card__author">
                                    Rolf Agather
                                </div>

                            </div>
                            <div class="blog__card__footer grid">
                                <div class="blog__card__topic col col-6">
                                    <a href="#">#Lorem ipsum</a>
                                </div>
                                <div class="blog__card__date col col-6 text--right">February 26, 2018</div>
                            </div>
                        </div>
                    </article>

                </div>
            </div>

            <div>
                <div class="carousel__item">
                    <article class="blog__card blog__card__with_image_portrait grid">
                        <div class="blog__card__image col-5">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                        </div>
                        <div class="blog__card__content col-7 grid">
                            <div class="blog__card__body">

                                <div class="blog__card__type">Test</div>

                                <h4 class="blog__card__title">
                                    <a href="#">Advisors see bright future for smart beta</a>
                                </h4>

                                <div class="blog__card__author">
                                    Rolf Agather
                                </div>

                            </div>
                            <div class="blog__card__footer grid">
                                <div class="blog__card__topic col col-6">
                                    <a href="#">#Lorem ipsum</a>
                                </div>
                                <div class="blog__card__date col col-6 text--right">February 26, 2018</div>
                            </div>
                        </div>
                    </article>

                </div>
            </div>

            <div>
                <div class="carousel__item">
                    <article class="blog__card blog__card__with_image_portrait grid">
                        <div class="blog__card__image col-5">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                        </div>
                        <div class="blog__card__content col-7 grid">
                            <div class="blog__card__body">

                                <div class="blog__card__type">Test</div>

                                <h4 class="blog__card__title">
                                    <a href="#">Advisors see bright future for smart beta</a>
                                </h4>

                                <div class="blog__card__author">
                                    Rolf Agather
                                </div>

                            </div>
                            <div class="blog__card__footer grid">
                                <div class="blog__card__topic col col-6">
                                    <a href="#">#Lorem ipsum</a>
                                </div>
                                <div class="blog__card__date col col-6 text--right">February 26, 2018</div>
                            </div>
                        </div>
                    </article>

                </div>
            </div>

            <div>
                <div class="carousel__item">
                    <article class="blog__card blog__card__with_image_portrait grid">
                        <div class="blog__card__image col-5">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                        </div>
                        <div class="blog__card__content col-7 grid">
                            <div class="blog__card__body">

                                <div class="blog__card__type">Test</div>

                                <h4 class="blog__card__title">
                                    <a href="#">Advisors see bright future for smart beta</a>
                                </h4>

                                <div class="blog__card__author">
                                    Rolf Agather
                                </div>

                            </div>
                            <div class="blog__card__footer grid">
                                <div class="blog__card__topic col col-6">
                                    <a href="#">#Lorem ipsum</a>
                                </div>
                                <div class="blog__card__date col col-6 text--right">February 26, 2018</div>
                            </div>
                        </div>
                    </article>

                </div>
            </div>

        </div>
        <button class="carousel__prev carousel__arrow prev"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></button>
        <button class="carousel__next carousel__arrow next"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg></button>
    </div>
</div>
 
<div class="carousel__container">
  <div class="carousel__inner container">
  <h3>{{ title }}</h3>
    <div class="carousel siema">
      {% for item in slides %}
        <div>
          <div class="carousel__item">
            {% render '@blog_card--with-image-portrait', item, true %}
          </div>
        </div>
      {% endfor %}
    </div>
    <button class="carousel__prev carousel__arrow prev"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></button>
    <button class="carousel__next carousel__arrow next"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-up"></use></svg></button>
  </div>
</div>
 
{
  "title": "Latest Announcements",
  "slides": [
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": null,
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": null,
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": null,
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": null,
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": null,
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    }
  ]
}
  • Content: 
    .carousel {

  &__inner{
   padding: $space-xxl 0px;
   display: block;
   position: relative;

   h3 {
    margin-left: $space-md;
    }
  }

  &__container{
    background: $gray-lighter;

    &.bg--white {
      background: $white;
    }
   }

  &__item {
    margin: $space-md;
    transition: .8s;
  }


  &__dots {
    display: flex;
    justify-content: center;
    margin-top: $space-md;
  
    li {
      margin: 0 $space-sm;
    }
  }

 &__pagination-item {
   display: none;
   background: $gray-light;
   height: 3px;
   border: 0px;
   padding: 0.2rem $space-xxl;
   cursor: pointer;

   @include mq($breakpoint-lg) {
    display: block
    }
 }         


  &__prev,
  &__next {
    font-size: 0;
    position: absolute;
    bottom: 40%;
    border: 0;
    background: none;
    z-index: 1;
    background: $gray-light;
    border-radius: 50%;
    transition: .3s;
    transform: scale(1);
    cursor: pointer;
    padding: $space-sm;

    @include mq($breakpoint-xl) {
      padding: $space-lg;
      }

    &:hover {
      transform: scale(1.2);
      background: $primary-light;
    }

  }

  &__prev .icon,
  &__next .icon {
    fill: $white;
    width: 15px;
    height: 15px;

    @include mq($breakpoint-xl) {
      width: 30px;
      height: 30px;
      }
  }

  &__next {
    right: 0px;

    @include mq($breakpoint-max) {
      right: -20px;
    }

    .icon {
      transform: rotate(90deg);
    }
  }

  &__prev {
    left: 0px;

    @include mq($breakpoint-max) {
      left: -20px;
      }
    
    .icon {
      transform: rotate(90deg);
    }
  }
}

// Angular hack.
.siema-indexes > div> div > *,
.siema > div> div > *,
.siema2 > div> div > * {
  display: inline;
}

.siema-indexes > div> div > * {
  height: 100%;
}

.loading-spinner {
  animation: rotate 2s linear infinite;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center center;
  width: 100px;

  .path {
    animation: dash 1.5s ease-in-out infinite;
    stroke: #ddd;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }
}
  • URL: /components/raw/carousel/_carousel.scss
  • Filesystem Path: src/components/organisms/carousel/_carousel.scss
  • Size: 2.1 KB

There are no notes for this item.