目次
jqueryでslickの使用:
スライダープラグインはたくさんありますが、その中でもよく使われる「slick」の使い方と実装方法を紹介します。
slick の使用方法は 2 つあります。ファイルをダウンロードしてロードする方法と、CDN を使用してロードする方法です。 slick には jQuery 自体も必要なので、jQuery もロードすることを忘れないでください。
HTML for Slick:
滑らかなスライダーの基本的な html を作成する:-
<ul class="slider-2" id="js-slider-2">
<li><img src="./assets/img/img01.jpg" alt=""></li>
<li><img src="./assets/img/img02.jpg" alt=""></li>
<li><img src="./assets/img/img03.jpg" alt=""></li>
<li><img src="./assets/img/img04.jpg" alt=""></li>
</ul>
<div class="dots-2"></div>
CSS for Slick:
.slider-2 .slick-slide {
width: 600px;
height: 400px;
margin: 0 40px;
position: relative;
overflow: hidden;
}
.slider-2 .slick-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-2 .slick-arrow {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
border: none;
outline: none;
font-size: 0;
position: absolute;
top: 180px;
z-index: 1;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
.slider-2 .slick-arrow::before {
content: '';
display: block;
width: 12px;
height: 12px;
border: 1px solid #09000d;
border-width: 3px 3px 0 0;
position: absolute;
top: 24px;
transform: rotate(45deg);
}
.slider-2 .slick-next {
right: 0;
}
.slider-2 .slick-prev {
left: 0;
}
.slider-2 .slick-next::before {
left: 20px;
}
.slider-2 .slick-prev::before {
border-width: 0 0 3px 3px;
right: 22px;
}
.dots-2 .slick-dots {
text-align: center;
}
.dots-2 .slick-dots li {
display: inline-block;
}
.dots-2 .slick-dots button {
display: block;
width: 10px;
height: 10px;
margin: 6px;
font-size: 0;
padding: 0;
border: 0;
outline: none;
cursor: pointer;
background: #bcbcbc;
border-radius: 50%;
}
.dots-2 .slick-dots .slick-active button {
background: #0a467d;
}
ここでは、「slick」と呼ばれるすべてのクラスが、slick 機能のために作成されています。
JS for Slick:
$(function () {
$('#js-slider-2').slick({
arrows: true, // 前・次のボタンを表示する
dots: true, // ドットナビゲーションを表示する
appendDots: $('.dots-2'), // ドットナビゲーションの生成位置を変更
speed: 1000, // スライドさせるスピード（ミリ秒）
slidesToShow: 1, // 表示させるスライド数
centerMode: true, // slidesToShowが奇数のとき、現在のスライドを中央に表示する
variableWidth: true, // スライド幅の自動計算を無効化
});
});
この手順に従って、滑らかなスライダーを作成してみましょう。
jqueryを使ってアコーディオンを作る方法:
jQuery のslideToggle を使い、HTML 内のタイトル要素をクリックして、直後のエリアを開閉する。
同時に、タイトル要素にクラス名を付与・除去することで、アイコンの形状をCSS で変化させる。
画面が読み込まれた際に開いておきたいアコーディオンパネルをJavaScript で指定してopen クラスを付与する。
HTML for Accordion:
<body>
<h2>9-2-1 任意の場所をクリックすると隠れていた内容が開く</h2>
<ul class="accordion-area">
<li>
<section>
<h3 class="title">お見積もりの目安を教えてください。</h3>
<div class="box">
<p>内容によって変化いたしますのでまずはお問い合わせフォームよりご相談ください。</p>
</div>
</section>
</li>
<li>
<section>
<h3 class="title">地方ですが発注は可能でしょうか</h3>
<div class="box">
<p>可能です。お気軽にご相談ください。</p>
</div>
</section>
</li>
<li>
<section>
<h3 class="title">セミナーやイベントの出演を依頼したいのですが</h3>
<div class="box">
<p>お問い合わせフォームより日時や内容などをご記入いただきご相談ください。</p>
</div>
</section>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="/app.js"></script>
</body>
CSS for Accordion:
/*==================================================
アコーディオンのためのcss
===================================*/
/*アコーディオン全体*/
.accordion-area{
list-style: none;
width: 96%;
max-width: 900px;
margin:0 auto;
}
.accordion-area li{
margin: 10px 0;
}
.accordion-area section {
border: 1px solid #ccc;
}
/*アコーディオンタイトル*/
.title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:1rem;
font-weight: normal;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
}
/*アイコンの＋と×*/
.title::before,
.title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: #333;
}
.title::before{
top:48%;
left: 15px;
transform: rotate(0deg);
}
.title::after{
top:48%;
left: 15px;
transform: rotate(90deg);
}
/* closeというクラスがついたら形状変化 */
.title.close::before{
transform: rotate(45deg);
}
.title.close::after{
transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
display: none;/*はじめは非表示*/
background: #f3f3f3;
margin:0 3% 3% 3%;
padding: 3%;
}
/*========= レイアウトのためのCSS ===============*/
h2{
text-align: center;
margin: 30px 0;
font-size:1rem;
}
JS for Accordion:
//アコーディオンをクリックした時の動作
$('.title').on('click', function() {//タイトル要素をクリックしたら
var findElm = $(this).next(".box");//直後のアコーディオンを行うエリアを取得し
$(findElm).slideToggle();//アコーディオンの上下動作
if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
$(this).removeClass('close');//クラス名を除去し
}else{//それ以外は
$(this).addClass('close');//クラス名closeを付与
}
});
これはjQueryでアコーディオンを作る方法です。
