【30代からのプログラミング】絶対わかる!初心者がjQueryでスライダーを作るための備忘録。

こんにちは、現在Progateでプログラミングを学習中です。30代主婦の超初心者ですが、同じようにプログラミング学習を始めた方のために忘備録を書いてみようと思います。(ホントは自分のために)
Progateのみで終わらせないように実際にエディターでプログラミングをしてみましょう!

理解する!jQueryで作るスライダー

目標:PREV /NEXT ボタンで4つのイラストを一枚ずつ表示させる
言語:HTML、CSS、jQuery
レベル:初心者(progateーjQuery上級編を攻略済み)

最初の一歩:HTMLを書く

さて、まずはHTMLを作らねばですよね。まずは構成を考えてみようと思います。デザインはもっとカッコいいものができるようになりたいですが、まずは仕組みから理解できるようにしたいです。

1:HTMLの骨組みを作る

まずは骨組みをつくります。PREVとNEXTのボタンでスライドさせます。スライドさせたいイラストはリストにします。

2:PREVNEXTにクラス名をつける

jQueryの記述では、この2つの共有クラス名と、個々のクラス名が必要になります。
それぞれ<div>で囲みます。赤のchangeが共有のクラス名になります
<div class="wrapper">
   <div class="change btn-prev">PREV</div>
   <div class="change btn-next">NEXT</div>
</div>

3: リスト4つのクラス名をつける

4つのイラストの<img>ですが、4つとも共通のクラス名をリスト内につくります。
<ul>
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
</ul>

次に最初のイラストにだけ、activeのクラスをつくります。あとからこのactiveをjQueryでつけたり外したりして、イラストの表示/非表示をさせませす。
<ul>
    <li class="slide active"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
    <li class="slide"><img src="...">
</ul>

ちょこっとメモ
グーグルドライブ内の画像を使うことができる!
詳しくは:Codepenの無料会員で画像を使うには
Codepenを利用するにあたって発見したのですが、他にも利用できそうなので覚えておくとよいかもしれません。

CSSを設定する

CSSでの役割は大きく2つです。

  1. 選択されていないイラストは非表示にする。
  2. 選択されたイラストだけを表示させる。
です。

1:まずは、イラストの非表示ですがこれはかんたん。slideをdesplay: none;で隠すだけです。
.slide{
    display: none;
}

2: 表示させたいクラスはactiveになります。あとから選択されたイラストにとactiveのクラスが付与されるようにjQueryで記述します。とにかく今は、
.active{
    display: block;
}

あとは、お好きなようにCSSで装飾などして下さい。

jQueryでスライダーファンクションをつくる!

さて、やってきました。こいつをやっつけてしまいましょう。まずは、jQueryを使う前にヘッダーにjQueryのCDNのスクリプトが記述されていること、</body>の前に、script.jsがリンクされているかどうか、確認しましょう。そして、script.js内では、jQueryは、function(){ .....}の中に書くことをもう一度思い出しましょうね。

私は、忘れていましたー。( ̄∇ ̄;)ハッハッハ 
初めはちゃんとPathが通っているかどうか<h1 id=hoge>などのテキストの色を変えてみて確認してみることをお勧めします。
$('#hoge').css('color' 'red');
こんな感じで。無事<h1>のテキストが赤くなったら安心してコーディングしていきましょう。

1:クリックファンクションを作る。

PREV / NEXT のボタンがクリックされたときに、イラストをスライドさせたいので、
まずは、クリックファンクションですね。この中に、色々細かな設定をしていきます。
PREV/NEXTの共通クラスの changeを使います。

$('.change').click(function(){ ...});

2:クリックによって、.activeが前/次の<li>に移動するようにします。


$('.change').click(function(){

var display(←任意の変数です)=$('.active');
display.removeClass('active'); (←まずはactiveを取ってしまいます。【.】が要らないことにも注目です。こいつにどれだけ苦しめられたことか。)

3:if{}else{}と.addClassをつかって.activeを移動させます。

$('.change').click(function(){
     var display = $('.active')
    display.removeClass('active')

  if($(this).hasClass('btn-next')){ (←クリックされたボタンがNEXTの時ということ)

        display.next().addClass('active');(←次の<li>にactiveをつけろということ)
  
} else{(←その他。ここではPREVが押されたとき)
       
        display.prev().addClass('active'); (←前の<li>にactiveをつけろという事)
  }
});

どうでしょう出来ましたか?

Codepenで今回の内容をコピペ学習できます。

今回の内容とプラス@をCodepenで公開しております。progateで学習した内容とほぼ同じになりますが、学習用によければコピペでもなんでもお使いください。イラストの著作権は私にあります、お好きにご利用ください。2次配布しないでくれれば、何に使ってもOKです。
See the Pen jQueryでスライド by ponmama (@ponmama) on CodePen.
実際にエディターを使って復習してみると、より理解がふかまりますので、おススメですよ。 今回初めてCodepenを使いましたが、もっといろいろ活用していきたいですね。 それでは、また書きます!

コメント

このブログの人気の投稿

素人でもAdobe Stockでの副業で売り上げを出す方法を考察

プロフィール

【30代からのプログラミング】Progateでとにかく勉強してみる編