メインビジュアル - メインビジュアル3-1

ソースコード

ソースコードである HTML を利用するページにコピーし、ご利用ください。mfc-base.cssおよびmfc-layout.cssの読み込みが必要です。

デザインコンポーネントについて

HTML

以下のコードをhead要素直下に配置します。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">

以下のコードをmain要素直下に配置します。

<hr class="mf-hr mf-col-1 mf-width-fullexpand" style="display: none">

<div class="mfc-mainvisual mfc-mainvisual-img mfc-mainvisual-001-003-1">
  <ul class="mfc-slider">
      <li style="background-image:url('https://via.placeholder.com/1280/f0a0a0/ffffff')">
        <div class="mfc-mainvisual-content">
            <h1>見出し</h1>
            <p>テキスト</p>
            <a class="mfc-link" href="#">リンク</a>
        </div>
      </li>
      <li style="background-image:url('https://via.placeholder.com/1280/f0f0a0/ffffff')">
        <div class="mfc-mainvisual-content">
            <h1>見出し</h1>
            <p>テキスト</p>
            <a class="mfc-link" href="#">リンク</a>
        </div>
      </li>
      <li style="background-image:url('https://via.placeholder.com/1280/a0f0a0/ffffff')">
        <div class="mfc-mainvisual-content">
            <h1>見出し</h1>
            <p>テキスト</p>
            <a class="mfc-link" href="#">リンク</a>
        </div>
      </li>
  </ul>
</div>

以下のコードをbodyタグ内のできるだけ後ろに配置します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
  jQuery(function ($) {
    if ($("html").hasClass("mf-converted")) {
      $('.mfc-mainvisual-001-003-1 .mfc-slider').slick(
        {
          fade: false,
          autoplay: true,
          arrows: true,
          centerMode: true,
          centerPadding: '0px',
          dots: true,
          speed: 1000,
          swipe: true,
          infinite: true,
          pauseOnHover: false,
        });
    } else {
      $('.mfc-mainvisual-001-003-1 .mfc-slider').slick(
        {
          fade: true,
          autoplay: true,
          arrows: false,
          centerMode: true,
          centerPadding: '0px',
          dots: false,
          speed: 1000,
          swipe: false,
          infinite: true,
          pauseOnHover: false,
        });
    }
  });
</script>