メインビジュアル - メインビジュアル2-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">

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

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

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