Stay Positive プログラミング奮闘記

誰かしらに何気ない気づきを!





はてなブログで動くスライダーの作り方!

今日は、おしゃれなブログのカスタマイズをしてみようと思い、ちょっとイジイジしてましたw

ということで私のような感じのブログイラストにしてみたいという方は参考に!してくださいな〜

 

スライダーって何ぞや?

スライダーっていうのはオススメ記事を動く感じで表示させることです。

ソースコード

bxsliderというJavaScriptを使っているらしいです。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet" />

<div style="text-align:center;">

<div class="bx-top">

<ul class="bxslider">

<li><a href="ブログのリンク先"><img src="写真のURL" title=“タイトル”/></a></li>

<li><a href="ブログのリンク先"><img src="写真のURL" title=“タイトル”/></a></li>

<li><a href="ブログのリンク先"><img src="写真のURL" title=“タイトル”/></a></li>

 

</ul>

</div>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.js" defer></script>

<script>

$(function() {

$('.bx-top').fadeIn('slow');

});

$(document).ready(function(){

$('.bxslider').bxSlider({

mode: 'horizontal',

moveSlides: 1, /*一度に動かすスライドの数*/

slideMargin: 40, /*空白調節*/

infiniteLoop: true, /*途切れなくループさせるか*/

slideWidth: 400, /*スライドの幅*/

minSlides: 3.5, /*1つの画面に表示させるスライドの最大数*/

maxSlides: 3.5,/*1つの画面に表示させるスライドの最小数*/

speed: 800, /*スライダーの移動スピード*/

pager: false, /*ページャーを表示させるかどうか*/

captions: true, /*スライダーの画像にタイトルを被せる場合はTRUE*/

auto: true

});

});

</script>

 

<script type="text/javascript">

/* ### ゆっくり表示 ### */

$(function() {

$('.bxslider').fadeIn('slow');

});

</script>

 

<style type="text/css">

/* ### 最初は非表示 ### */

.bx-top{

display:none;

}

/* ### 各種調整 ### */

.bx-wrapper {

position: relative;

margin-bottom:0px !important;

padding: 0;

-ms-touch-action: pan-y;

touch-action: pan-y;

}

</style></div> 

 

注意点

青色の部分を自分用にカスタマイズしていただければ完成です!

自分の場合はとりあえず、5枚作りました。。。

minSlides: 3.5, /*1つの画面に表示させるスライドの最大数*/

maxSlides: 3.5,/*1つの画面に表示させるスライドの最小数*/

 このところで一度に何枚表示させることができるかを設定できます。

一枚のスライドの大きさを決められます。

参考にした記事参考にした記事

english-apple-diy.hatenablog.com

  他のカスタマイズ記事

www.kobayashinitya.xyz

www.kobayashinitya.xyz

www.kobayashinitya.xyz