Lunds universitet - Style Guide

Carousel 

<div class="container-fluid mx-0 px-0 nav-undecorated">
    <div id="carousel-example" class="carousel slide" data-bs-ride="false">
        <div class="carousel-inner" tabindex="0">
            <div class="carousel-item active">
                <a href="../../#slide1-target.html" class="nav-block h-100" tabindex="-1">
                    <div class="carousel-img-container">
                        <img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Slide 1 image" class=" carousel-img">

                    </div>
                    <div class="carousel-caption">
                        <p>
                            <span class="a nav-block-link">Slide 1&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                        </p>
                    </div>
                </a>
            </div>
            <div class="carousel-item ">
                <a href="../../#slide2-target.html" class="nav-block h-100" tabindex="-1">
                    <div class="carousel-img-container">
                        <img src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x, ../../images/_content/placeholder_2@2x.jpg 2x" alt="Slide 2 image" class=" carousel-img">

                    </div>
                    <div class="carousel-caption">
                        <p>
                            <span class="a nav-block-link">Slide 2&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                        </p>
                    </div>
                </a>
            </div>
            <div class="carousel-item ">
                <a href="../../#slide3-target.html" class="nav-block h-100" tabindex="-1">
                    <div class="carousel-img-container">
                        <img src="../../images/_content/placeholder_3@1x.jpg" srcset="../../images/_content/placeholder_3@1x.jpg 1x, ../../images/_content/placeholder_3@2x.jpg 2x" alt="Slide 3 image" class=" carousel-img">

                    </div>
                    <div class="carousel-caption">
                        <p>
                            <span class="a nav-block-link">Slide 3&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-example" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Föregående</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel-example" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Nästa</span>
        </button>
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="1" class="" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="2" class="" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-controls-container">
            <div class="carousel-controls">
                <button class="btn rounded-0 border-0 carousel-controls-pause"></button>
            </div>
        </div>
    </div>
</div>
 
<div class="container-fluid mx-0 px-0 nav-undecorated">
  <div id="carousel-example" class="carousel slide" data-bs-ride="false">
    <div class="carousel-inner" tabindex="0">
      {{#each slides}}
        <div class="carousel-item {{#if @first}}active{{/if}}">
          <a href="{{#if link}}{{path link}}{{/if}}" class="nav-block h-100" tabindex="-1">
            <div class="carousel-img-container">
              {{render "@image" image}}
            </div>
            <div class="carousel-caption">
              <p>
                <span class="a nav-block-link">{{title}}&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
              </p>
            </div>
          </a>
        </div>
      {{/each}}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-example" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Föregående</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel-example" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Nästa</span>
    </button>
    <div class="carousel-indicators">
      {{#each slides}}
        <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="{{@index}}" class="{{#if @first}}active{{/if}}" aria-label="{{title}}"></button>
      {{/each}}
    </div>
    <div class="carousel-controls-container">
      <div class="carousel-controls">
        <button class="btn rounded-0 border-0 carousel-controls-pause"></button>
      </div>
    </div>
  </div>
</div>
 
{
  "_full-screen": true,
  "slides": [
    {
      "image": {
        "src": "/images/_content/placeholder_1@1x.jpg",
        "src-2x": "/images/_content/placeholder_1@2x.jpg",
        "alt": "Slide 1 image",
        "modifiers": [
          "carousel-img"
        ]
      },
      "title": "Slide 1",
      "link": "#slide1-target"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_2@1x.jpg",
        "src-2x": "/images/_content/placeholder_2@2x.jpg",
        "alt": "Slide 2 image",
        "modifiers": [
          "carousel-img"
        ]
      },
      "title": "Slide 2",
      "link": "#slide2-target"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_3@1x.jpg",
        "src-2x": "/images/_content/placeholder_3@2x.jpg",
        "alt": "Slide 3 image",
        "modifiers": [
          "carousel-img"
        ]
      },
      "title": "Slide 3",
      "link": "#slide3-target"
    }
  ]
}

No notes defined.