うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他少し物騒なものや奇妙なものの紹介をしています(たまにお役立ち情報や雑記も書きます)。

たまに毒吐くちゃん

カテゴリー「Web関連」の人気記事TOP3

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

time 更新日:  time 公開日:2017/01/23

jQueryスライダー
これは画像です。下の方に実際に機能しているスライドショーを設置しています。

ブログやWebサイトに、上のようなスライドショー(スライダー、カルーセルとも呼ばれます)を設置したいと思ったことはありませんでしょうか。
以下でそのコードをご紹介致します。

スポンサーリンク

画像がコンベアのように横に流れるスライドショーのCSS

上記のコードをスタイルシートに記述します。

高さ

8行目の

height:93px;

の数字を変えると、スライドの高さを変更できます。下のものは高さ177pxの少し大きめのスライドです。

回り込み

リストを横並びにするのに、

float:left;

(17行目)というコードを使っています。

float」より「table-cell」や「inline-block」を使用したほうが現代的(?)だと思うのですが、そうするとサイズがおかしくなったり速度がやたら速くなったりしたので「float」を使用しています。

回り込みの解除

回り込みに「float」を使用することにより回り込みの解除が必要になります。

22~31行目と、12行目の

zoom: 1;

が回り込み解除に関するコードになります(12行目はIE6、7用)。

ちなみに、IE8を切り捨てるともっとコードを短くできるのだとか。

参考 【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て(2016年版)

数年後にはIE8切り捨ての短いコードの方が主流になっているかも……。

画像がコンベアのように横に流れるスライドショーのjQueryのコード

参考にさせて頂いたサイト

【jQuery】超カンタン!!ループするスライドショーの作り方

上記のページを参考にさせて頂きました(このページのスライドショーは縦方向にスライドします)。


スライドショーを表示させたい場所に以下のjQueryのコードを記述します。

WordPressWordPress以外でコードが異なりますのでご注意ください。

WordPress以外のjQueryのコード

WordPress用のjQueryのコード

WordPressの場合、jQueryのカプセル化というものが必要になります。

参考 WordPressでのダメなjQuery関数の囲み方4パターンと対策講座

共通事項

スライドショーの速度

10行目の

duration : 3000,

の数字を変えると画像がスライドする速度を変更できます。

<li></li>の間にアイテムを追加する

下の方にある「<li></li>」の間に、

<img src="画像のURL">

や、

<a href="リンク先のURL"><img src="画像のURL"></a>

と書くことにより、画像を表示させたりその画像にリンクを貼ることができます。

アイテム数に応じて、不要な「<li></li>」は削除してください。足りない場合は付け足してください。

画像がコンベアのように横に流れるスライドショーの完成

上記のコードにより、このようなスライドショーが表示されるようになります。

別のタイプのスライドショーの紹介

記事を更新順にカルーセル表示できる「忍者画像RSS」


以前記事上に「忍者画像RSS」というものを設置していました。

WordPressのプラグインを探し回ったのですが、なかなか希望のものが見つからず……(手動でリンクを貼るとか、カルーセルではなくて画像がページいっぱいの大きいものになってしまうとか、何かしら不満点が……)。

RSSを登録しておけば、

  • 記事を公開すると自動で更新され
  • 管理画面から色や速度をいじることもできる
  • しかもカルーセル
  • お値段はもちろん無料!

ということで、「忍者画像RSS」、なかなかの優れものではないでしょうか(回し者ではありません)。
右下に小さく手裏剣マーク(「忍者画像RSS」へのリンク)が出てしまうのはちょっと気になりますが……それほど目立たないし、許容範囲ではないかと。

しかしたまにですが記事に紛れて広告が流れてくるのと、読み込みにちょっと時間がかかる気がしたので、現在記事上には人気記事を表示しています。

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)






  

上のようなスライドショーを、JavaScriptやjQueryを使わずにCSSで表示することができます。下記の記事でその方法を紹介しています。

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

スポンサーリンク


follow us in feedly  友だち追加数
 

 

ブログの更新をメールでお知らせします!

たまに毒吐くちゃん

この記事をシェアする

たまに毒吐くちゃん

関連する記事

出展記録

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

ClubTでTシャツやバッグを販売しています

プロフィール

うらなか書房

うらなか書房

あやしい絵を描いて、それをTシャツグッズにしています。


ホラー映画カルト映画、その他少し物騒なもの奇妙なものを見たり読んだりすることが好きです。

ちょっと変人かもしれませんが、危ない感じではなくただのヘッポコなので、お気軽にSNSでのフォローコメントをお願いします!

詳細なプロフィール

ブログをメールで購読

メールアドレスを記入して「購読」ボタンをクリックすると、このブログの更新情報をメールで受信できます。

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

うらなか書房のおすすめ映画

うらなか書房のおすすめ映画
うらなか書房がおすすめのホラー映画カルト映画B級映画などをAmazonで紹介しています。


スポンサーリンク

Twitter