はてなブログ用簡易スライダーを作ってみた

2017.11.01 javascript, WebTips, はてなプラグイン, はてなブログ

別ブログで縦長の新聞記事を引用しようとして、これ、幾つかに分けてスライダーにできないかなと思い立ち、簡易スライダーを作ってみました。

＠半径とことこ60分

どういうものかは上の記事をご覧いただければわかると思いますが、６段の記事があり、そのまま画像にしますとデカすぎますので、６枚の画像をスライダーにしようというものです。もちろん写真などどんな画像でも使えます。

とりあえずは、進む、戻るのナビを出して、クリックすると１枚ずつスライドしていくという単純なものです。

使い方
注意事項など
Javascript
CSS

01使い方

画像をどんどん放り込んで、<div id="imzSlider"></div> で括る
その後ろに下の Javascript を追加する
下の CSS を「デザインCSS」に追加する

サンプル

<div id="imzSlider">
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204217j:plain" src="/wp-content/uploads/2017/10/20171031204217.jpg" alt="f:id:ausnichts:20171031204217j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204322j:plain" src="/wp-content/uploads/2017/10/20171031204322.jpg" alt="f:id:ausnichts:20171031204322j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204422j:plain" src="/wp-content/uploads/2017/10/20171031204422.jpg" alt="f:id:ausnichts:20171031204422j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204452j:plain" src="/wp-content/uploads/2017/10/20171031204452.jpg" alt="f:id:ausnichts:20171031204452j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204500j:plain" src="/wp-content/uploads/2017/10/20171031204500.jpg" alt="f:id:ausnichts:20171031204500j:plain" /></p>
<p><img class="hatena-fotolife" title="f:id:ausnichts:20171031204514j:plain" src="/wp-content/uploads/2017/10/20171031204514.jpg" alt="f:id:ausnichts:20171031204514j:plain" /></p>
</div>

Javascript を、予め「フッタ」に入れておけば、サンプルのように上の１番だけですみます。

02注意事項など

急ぎ作りましたので、まだβ版程度です。

ナビの背景もわかりやすく赤になっていますが、CSS で変更できます
はてなの仕様では画像は <p></p> で括られるようですので、その想定です
つまり、HTML を直書きした場合は、画像をそれぞれ <p></p> で括る必要があります
対応ブラウザなど細かいチェックはしていませんので、使用は自己責任でお願いします

03Javascript

<script>
function imzSlide(n){
    var wrapper = document.getElementById('imzSlider');
    var slider = wrapper.children;
    var total = slider.length - 2;   // ナビを除く
    for(var i=0; i<total; i++){
        if(slider[i].classList.contains('hiddenslide')){
            break;;
        }
    }


    if(n === 'n'){
        slider[i].classList.toggle('hiddenslide');
        if(i === 1) wrapper.classList.remove('noprev');
        if(i === (total-1)) wrapper.classList.add('nonext');
    }else{
        slider[i-1].classList.toggle('hiddenslide');
        if(i === 2) wrapper.classList.add('noprev');
        if(i === total) wrapper.classList.remove('nonext');
    }
}


(function(){
    var wrapper = document.getElementById('imzSlider');
    if(wrapper){
        var slider = wrapper.children;
        var total = slider.length;
        // slider[0]は表示しておく
        for(var i=1; i<total; i++){
            slider[i].classList.add('hiddenslide');
        }


        var divPrev = document.createElement('div');
        divPrev.classList.add('prevslide');
        divPrev.addEventListener('click', function(){imzSlide('p')}, false);
        var divNext = document.createElement('div');
        divNext.classList.add('nextslide');
        divNext.addEventListener('click', function(){imzSlide('n')}, false);
        wrapper.appendChild(divPrev);
        wrapper.appendChild(divNext);
        wrapper.classList.add('noprev');


        var style = document.createElement('style');
        document.head.appendChild(style);
        style.sheet.insertRule( '#imzSlider p.hiddenslide { right: -' + wrapper.clientWidth + 'px; }', 0 );
    }
}());
</script>

04CSS

#imzSlider {
  position: relative;
  overflow: hidden; }
  #imzSlider p {
    -webkit-transition: right 400ms ease-in-out;
    transition: right 400ms ease-in-out;
    line-height: 0;
    position: absolute;
    right: 0;
    top: 0; }
    #imzSlider p:first-child {
      position: relative; }
  #imzSlider .prevslide {
    display: block;
    position: absolute;
    background: red;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center;
    cursor: pointer; }
    #imzSlider .prevslide::before {
      font-family: blogicon;
      content: "\f005";
      font-size: 2rem;
      color: white;
      line-height: 3rem; }
  #imzSlider.noprev .prevslide {
    display: none; }
  #imzSlider .nextslide {
    display: block;
    position: absolute;
    background: red;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
    cursor: pointer; }
    #imzSlider .nextslide::before {
      font-family: blogicon;
      content: "\f006";
      font-size: 2rem;
      color: white;
      line-height: 3rem; }
  #imzSlider.nonext .nextslide {
    display: none; }

1rem は 10pxです。使用している単位に合わせて変更してください。