Sponsored Link

【コピペで完成】jQueryを使った簡単スライダーの作成

web制作

こんにちは、げんまるです。

Web制作をしているとつまづきがちなjQuery。

その中でも簡単にスライダーを設定出来たらいいなと思ったことはありませんか?

僕もずっとそう思っていました。

今回の記事は下記のような人におすすめになっています。

jQueryを覚えたばかりの人
ポートフォリオにスライダーを入れたい人
コピペで簡単に凝ったサイトを作りたい人

こんなスライダーが出来ます

では早速、作っていきましょう!
今回は、メジャーなslickを使って作成しています!

手順1 cssとjsをダウンロードして読み込みましょう

slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

①上記のサイトにアクセスして、「get it now」 → 「Download now」でサクッとダウンロードしてください。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

②↑はheadタグ内に入れ込みましょう。

<script type="text/javascript" src="slick/slick.min.js"></script>

③↑そしてこの「slick/slick.min.js」のファイルはの直前に読み込みましょう!

手順2 動かすコンテンツを作成

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

このままコピペでOKです。
「your content」は、写真でもok。imgタグで指定ができます。
その場合は写真の大きさを整える必要が出てきます。

手順3 jsをコピペする

今回は一番使いやすいauto機能付きのjsにしました。

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

そのままコピペしましょう。

.autoplayのところを#our-classに変更すれば動くます!

タイトルとURLをコピーしました