Content Carousel

HTML

<content-carousel id="carousel1" slot="content" swiper-options='{"slidesPerView": 1.25, "slidesPerGroup": 1, "autoplay": true, "loop": true}'>
  <content-hero-block class="swiper-slide">
    <content-image width="886|16" height="307|9" slot="media" src="https://m.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_ReadyIn5_mob.jpg|https://www.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_ReadyIn5_pc.jpg"></content-image>
    <content-text-block slot="content" style-class="dark|light" vertical-alignment="center" background="transparent">
      <content-spacing-wrapper text-align="center|left" left-offset="4|5|10" right-offset="4" top-offset="4" bottom-offset="4" max-width="100|50|45|40" horizontal-alignment="center|left">
        <content-line style-class="text-style--big-title|text-style--big-title">READY IN 5</content-line>
        <content-line style-class="text-style--copy">
          Beauty is evolving, and so are we. Now you can book complimentary one-on-one or group video sessions with a top Bobbi Brown artist for makeup tips and tutorials tailored just to you.
        </content-line>
        <content-line style-class="text-style--copy">
          Beauty is evolving, and so are we. Now you can book complimentary one-on-one or group video sessions with a top Bobbi Brown artist for makeup tips and tutorials tailored just to you.
        </content-line>
        <content-group align="center|left">
          <content-spacing-wrapper top-offset="10">
            <content-button style-class="button button--dark|button button--light" href="/book-now">Book Now</content-button>
          </content-spacing-wrapper>
        </content-group>
      </content-spacing-wrapper>
    </content-text-block>
  </content-hero-block>
  <content-hero-block class="swiper-slide">
    <content-image width="886" height="307" slot="media" src="https://m.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_Full_Size_Skincare_mob.jpeg|https://www.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_Full_Size_Skincare_pc.jpeg"></content-image>
    <content-text-block slot="content" style-class="dark" vertical-alignment="center">
      <content-spacing-wrapper left-offset="4|5|10" right-offset="4" top-offset="4" bottom-offset="4" max-width="100|50|45|40" horizontal-alignment="center|left|left|right">
        <content-line style-class="text-style--big-title">Artistry like never before</content-line>
        <content-line style-class="text-style--copy">
          Beauty is evolving, and so are we. Now you can book complimentary one-on-one or group video sessions with a top Bobbi Brown artist for makeup tips and tutorials tailored just to you.
        </content-line>
        <content-line style-class="text-style--copy">
          Beauty is evolving, and so are we. Now you can book complimentary one-on-one or group video sessions with a top Bobbi Brown artist for makeup tips and tutorials tailored just to you.
        </content-line>
        <content-group>
          <content-spacing-wrapper top-offset="10">
            <content-button style-class="button button--dark|button button--light" href="/book-now">Book Now</content-button>
          </content-spacing-wrapper>
        </content-group>
      </content-spacing-wrapper>
    </content-text-block>
  </content-hero-block>

  <content-hero-block background="#FFF|#000">
    <content-image width="886" height="307" slot="media" src="https://m.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_Ingredients_Glossary_Soft_Launch_mob.mp4|https://www.bobbibrowncosmetics.com/media/export/cms/VirtualServices/BB_PC_HP_Hero_VirtualServices_One-on-One_@2x.mp4"></content-image>
    <content-text-block slot="content" style-class="dark|light" vertical-alignment="center">
      <content-spacing-wrapper left-offset="4|5|10" right-offset="4" top-offset="4" bottom-offset="4" max-width="100|50|45|40" horizontal-alignment="left">
        <content-line style-class="text-style--eyebrow">VIRTUAL ARTISTRY CONSULTATIONS</content-line>
        <content-line style-class="text-style--big-title">Artistry like never before</content-line>
        <content-line style-class="text-style--copy">
          Beauty is evolving, and so are we. Now you can book complimentary one-on-one or group video sessions with a top Bobbi Brown artist for makeup tips and tutorials tailored just to you.
        </content-line>
        <content-line style-class="text-style--copy">
          Beauty is evolving, and so are we. Now you can book complimentary one-on-one or group video sessions with a top Bobbi Brown artist for makeup tips and tutorials tailored just to you.
        </content-line>
        <content-group>
          <content-spacing-wrapper top-offset="10">
            <content-button style-class="button button--dark|button button--light" href="/book-now">Book Now</content-button>
          </content-spacing-wrapper>
        </content-group>
      </content-spacing-wrapper>
    </content-text-block>
  </content-hero-block>
</content-carousel>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.text-style--faq-header {
  font-size: 3rem;
}

p {
  color: black;
}

[aria-expanded] {
  transition: all 1s;
}

[aria-expanded="true"] {
  background: #DDDDDD;
  padding: 20px 20px 40px;
}