質問: 初めて質問をいたします社会人1年目の新人webデザイナーです。 下記のサイトのスライド部分(2か所)の実装方法を教えていただけませんでしょうか? ●●対象部分●● http://tarikihongwan.net/ 内の 1. #contentswrapper #mainslider 及び .pager部分 (自動的に一定間隔でスライドし,スマホでもフリックに対応) 2. #photosliede 部分 (自動的に等速でスライドし,スマホでもフリックに対応) ●●詳細●● ====1.#contentswrapper #mainslider のスライドショー部分==== 対象スライドショーは ``css element.style { width: 1280px; transition-duration: 500ms; transition-timing-function: cubic-bezier(0, 0, 0.25, 1); transform: translate3d(***-640px***, 0px, 0px); とCSS3のtranslate3dで実装されています。 スマホでも非常になめらかにかつフリックに対応して動き, ぜひこのスライドを実装したいと考えています。 要素検証をするとこのx項(-640の部分)が デバイスの最大サイズに合わせて自動的に一定時間間隔で 変化をするのですが,その方法を教えていただけませんでしょうか? くわえて.pager部分との同期方法もご教示いただけると大変うれしいです。 (#mainsliderのtranslate3dと同期して自動・一定間隔で .currentのクラスが付与され,画像が変わります。) animationプロパティを利用すれば解決が早いかと思うのですが, 実際に簡単なものを実装して確認をしたところカクカクと動きが不自然になってしまうため, このサイトのようにtransrate3dを一定間隔で変化させることで, 自動的にスライドする&フリックに対応したスライドを実装したいです。 (delayプロパティで秒数を遅らせる方法も試してみたのですが, それだと繰り返しループにはならず断念いたしました。) ====2.#photosliede 部分==== **#photoslide内に並べられたa要素のleft部分が自動的に減っていき,一定の値になるとロケット鉛筆のようにa要素の並びの一番下(画面で言うと一番上流側)に移動します。この部分はどのように実装をしているのか教えていただけませんでしょうか? ●●質問者のレベル●● デジタルハリウッド大学で HTML5やCSS3を勉強してある程度は理解が進み, 仕事を通じて理解を深めているような初級者に やっと毛が生えてきたようなレベルです。 jQueryは読むことができ, アコーディオンなど簡単なものは 実装することができます。 Javascriptはあまりよくわかりません。 お手数をおかけいたしますが, どうぞよろしくお願いいたします。
回答: とりあえず、jQueryでタップやスワイプなどのスマートフォン操作を取得する+イメージスライダーのサンプル など、「スワイプ jQuery」等のキーワードで調べれば、おおまかな作り方は出てきます。 正直、ここの解答欄で全て説明するには、内容が多いと思います。 まず一通り調べて、作ってみて、分からない点をご質問されてください。