タグ:漫画

mimic_smp
2005年、プロバイダの漫画コンテンツに掲載された『ミミック』。5ページと短いので、タッチスライダーにしてみた。スマホからでも見られるが、縦表示だと画像が小さくなるので、パソコンからがおススメ。

http://tencount.main.jp/comic/mimic/

スライダーにする際、使用したJSスクリプトは「Swiper」。以下、コードサンプル。

/*---------------------------
</header>前でcssを読み込む
------------------------------*/

<link rel="stylesheet" href="CSSまでのパス/swiper.min.css">
/*---------------------------
<body>内にスライド内容を記述
------------------------------*/


<div class="swiper-container">
  <div class="swiper-wrapper">
     
      <!--1 Slide-->
      <div class="swiper-slide">
<img src="mimic1.jpg">
      </div>
     
      <!--2 Slide-->
      <div class="swiper-slide">
<img src="mimic2.jpg">
      </div>
     
      <!--以下、同様にスライド分を記述-->
     
  </div>
     

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
    
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
    
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
/*---------------------------
</body>前か後にJSを記述
------------------------------*/
<script src="JSまでのパス/swiper.min.js"></script>
<script>       
var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  mode: 'vertical',
  loop: true,
  
  // If we need pagination
  pagination: '.swiper-pagination',
  
  // Navigation arrows
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  
  // And if we need scrollbar
  scrollbar: '.swiper-scrollbar',
})       
</script>
CSSは割愛したが、該当部分では「.swiper-container」と「.swiper-slide img」を指定した。

以上、ご参考になれば幸いです。

【関連リンク】
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper | コリス

名古屋で最初にできた公園、鶴舞公園。
読みは「つるまい」でなく「つるま」。
由来からはじめた連作ラフ画、facebookにアルバムとしてまとめました。

画像クリックで、facebookアカウントを持ってない方も見られます。
見てってちょ~(*´з`)
150804

img1
配達物を受け取った時、「寒いですね」と声をかけたら。
「ね。帰りたい」と言われました。

モニター越しの様子は、「留守だと再配達だから、お願い出て!」の叫びだったか。
重たい荷物を運びいれた上、ちゃんと立てかけてくれて。
寒い中をありがとうございました(^人^)

にほんブログ村 漫画ブログへ

↑このページのトップヘ