ant-design/components/carousel/__tests__/__snapshots__/demo.test.ts.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders components/carousel/demo/autoplay.tsx correctly 1`] = `
<div
  class="ant-carousel"
>
  <div
    class="slick-slider slick-initialized"
    dir="ltr"
  >
    <div
      class="slick-list"
    >
      <div
        class="slick-track"
        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
        class="slick-active"
      >
        <button>
          1
        </button>
      </li>
      <li
        class=""
      >
        <button>
          2
        </button>
      </li>
      <li
        class=""
      >
        <button>
          3
        </button>
      </li>
      <li
        class=""
      >
        <button>
          4
        </button>
      </li>
    </ul>
  </div>
</div>
`;

exports[`renders components/carousel/demo/basic.tsx correctly 1`] = `
<div
  class="ant-carousel"
>
  <div
    class="slick-slider slick-initialized"
    dir="ltr"
  >
    <div
      class="slick-list"
    >
      <div
        class="slick-track"
        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
        class="slick-active"
      >
        <button>
          1
        </button>
      </li>
      <li
        class=""
      >
        <button>
          2
        </button>
      </li>
      <li
        class=""
      >
        <button>
          3
        </button>
      </li>
      <li
        class=""
      >
        <button>
          4
        </button>
      </li>
    </ul>
  </div>
</div>
`;

exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
<div
  class="ant-carousel"
>
  <div
    class="slick-slider slick-initialized"
    dir="ltr"
  >
    <div
      class="slick-list"
    >
      <div
        class="slick-track"
        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
          style="outline:none;width:11.11111111111111%;position:relative;left:0;opacity:1;transition:opacity 500ms ease, visibility 500ms ease"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                1
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                2
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                3
              </h3>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
          tabindex="-1"
        >
          <div>
            <div
              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                4
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
        class="slick-active"
      >
        <button>
          1
        </button>
      </li>
      <li
        class=""
      >
        <button>
          2
        </button>
      </li>
      <li
        class=""
      >
        <button>
          3
        </button>
      </li>
      <li
        class=""
      >
        <button>
          4
        </button>
      </li>
    </ul>
  </div>
</div>
`;

exports[`renders components/carousel/demo/position.tsx correctly 1`] = `
Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
    style="margin-bottom:8px"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
    >
      <span
        class="ant-radio-button ant-radio-button-checked"
      >
        <input
          checked=""
          class="ant-radio-button-input"
          type="radio"
          value="top"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Top
      </span>
    </label>
    <label
      class="ant-radio-button-wrapper"
    >
      <span
        class="ant-radio-button"
      >
        <input
          class="ant-radio-button-input"
          type="radio"
          value="bottom"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Bottom
      </span>
    </label>
    <label
      class="ant-radio-button-wrapper"
    >
      <span
        class="ant-radio-button"
      >
        <input
          class="ant-radio-button-input"
          type="radio"
          value="left"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Left
      </span>
    </label>
    <label
      class="ant-radio-button-wrapper"
    >
      <span
        class="ant-radio-button"
      >
        <input
          class="ant-radio-button-input"
          type="radio"
          value="right"
        />
        <span
          class="ant-radio-button-inner"
        />
      </span>
      <span>
        Right
      </span>
    </label>
  </div>,
  <div
    class="ant-carousel"
  >
    <div
      class="slick-slider slick-initialized"
      dir="ltr"
    >
      <div
        class="slick-list"
      >
        <div
          class="slick-track"
          style="width:900%;left:-100%"
        >
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="-1"
            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="false"
            class="slick-slide slick-active slick-current"
            data-index="0"
            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  1
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide"
            data-index="1"
            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  2
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide"
            data-index="2"
            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  3
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide"
            data-index="3"
            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="4"
            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  1
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="5"
            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  2
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="6"
            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  3
                </h3>
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="7"
            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul
        class="slick-dots slick-dots-top"
        style="display:block"
      >
        <li
          class="slick-active"
        >
          <button>
            1
          </button>
        </li>
        <li
          class=""
        >
          <button>
            2
          </button>
        </li>
        <li
          class=""
        >
          <button>
            3
          </button>
        </li>
        <li
          class=""
        >
          <button>
            4
          </button>
        </li>
      </ul>
    </div>
  </div>,
]
`;