pockets[楽天][jQuery]商品画像を横に自動スライドする[endless_scroll_min.js]と似たような内容になりますが、ショップページに商品を陳列する際スペースがない場所でも自動でスクロールさせて動かすことで、多くの商品をお客さんの目に止めることが可能になります。本日は、縦にも横にも画像などの要素をスクロールさせる方法を紹介したいと思います。スポンサードリンク画像を縦横にスクロール「simplyscroll.js」では、具体的にどんな表示イメージかというと本日は無料化で何かと話題なYahoo!ショッピングから紹介したいと思います。靴ショップやまうページ中ごろにある「瞬足」が並んでいる部分を見てもらうと画像がスクロールしています。実装方法についてsimplyscrollの公式サイトより、jquery.simplyscroll.zipをダウンロードしてください。「buttons.png」の3つを使います。http://jquery.com/よりjquery.min.jsもダウンロードしてください。ダウンロードした3つのファイルを読み込みんでいます。(サーバー内にアップするのを忘れないでください。スライダーの設定、実行をしている部分です。ここで、動き、表示等の設定を行います。id=”slider”>のidを指定しています。htmlの記述部分も、非常にシンプルですね。src=””></li>を設定します。画像からのリンク設定も出来ます。品名や価格などを表示したい場合も<li></li>内に記述可能です。内で表示する画像に合わせて幅、高さを調整する必要があります。【横スライドの場合】140、141行目(width、height)、146、147行目(width、height)で全体の表示領域を調整します。154、155行目(width、height)で1つの画像の表示領域を調整します。【縦スライドの場合】182、183行目(width、height)、188、189行目(width、height)で全体の表示領域を調整します。195、196行目(width、height)で1つの画像の表示領域を調整します。実行の記述部分にオプションを指定します。});})(jQuery);</script>縦にスライド実行の記述部分にオプションを指定します。‘backwards’など実行時のオプションとして指定することが出来ます。詳しくは、公式サイトにて確認ください。ページにスペースがない時など商品情報を陳列すれば良いかもしれません。活用してみてください。18:21はじめまして。アップありがとうございます。「画像などの要素を縦にも横にも簡単スクロール」を自分のサイトで試していたのですが、画像が縦に並んでしまいます。スライドショーも始まりません。様コメントありがとうございます。ソースを確認しないと何ともいえませんが、スライドも動いてないとのことですのでサンプルソースにある1,2,3行目でcss、jsなどの外部ファイルを読み込んでいる部分が怪しいかもしれません。外部ファイルをダウンロードしてサーバーにアップロードする必要があります。サンプルソースではそれぞれファイル名しか指定していない状態になっています。→(実装を記述したhtmlファイル)jquery.simplyscroll.cssjquery.min.jsjquery.simplyscroll.jsがサーバーの同じ階層にアップされている必要があります。css,jsなど別フォルダを作成してそこにアップロードしている場合は、実際の環境に合わせてファイルの場所を指定する必要があります。例)href=”./css/jquery.simplyscroll.css”src=”./js/jquery.min.js”上記のファイルの読み込みが問題ないのであれば、読み込んでいるjQueryのバージョンなども関係してくるかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。万が一問題があればご連絡ください。