trancelate3dのx項を自動的に一定間隔で動かしたい

初めて質問をいたします社会人1年目の新人webデザイナーです。

下記のサイトのスライド部分（2か所）の実装方法を教えていただけませんでしょうか？

●●対象部分●●
http://tarikihongwan.net/ 内の
１． #contentswrapper #mainslider 及び .pager部分
（自動的に一定間隔でスライドし，スマホでもフリックに対応）
２． #photosliede 部分
（自動的に等速でスライドし，スマホでもフリックに対応）

●●詳細●●
＝＝＝＝１．#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はあまりよくわかりません。

お手数をおかけいたしますが，
どうぞよろしくお願いいたします。

ogaaaan

2016/02/24 07:41

厳しい事いうようだけど、『なんであんたのクライアントを喜ばすのに手伝わないといけないんだ？』ってみんな思ってるかもね。余計な文章はいらない。あと、少なくとも自分でコードかいて試すとかが常識でありマナーだと思うんだけど、そういうところはその何とか大学ってところでは教わってないのかな？

hale

2016/02/24 07:44

ogaaaan様コメントいただきありがとうございます。ご指摘いただきましたことを受けて改めて質問し直したいと思います。

ogaaaan

2016/02/24 07:46

その姿勢はすごく良いと思います！！

hale

2016/02/24 07:56

ありがとうございます。丁寧に質問をしたつもりだったのですが, 常識も知らず不快な思いをさせてしまい大変申し訳ありませんでした。また質問を投稿した際にはどうぞよろしくお願いいたします。

issei.

2016/02/24 12:29

疑問点を明確化したいのですが、xの項の値を変えたオブジェクトをたくさん用意したいのではなく、動くオブジェクトを１つ作りたいだけ、でしょうか？この辺りが参考になりそうですがいかがですか？http://blog.fenrir-inc.com/jp/2011/05/css3.html

hale

2016/02/24 13:48

issei.さまコメントいただきありがとうございます。仰るとおり動くオブジェクトを１つ作ることを目的としております。条件として「一定時間間隔で」「自動的に」ということを考えておりました。（質問内で参考として紹介したさいとは，jsonをajaxで読み込みjQueryでx項の値が変わるよう設定をしておりました。jsonの作り方やjQueryに関して理解が進んでおらず曖昧なまま投稿をしてしまいました。）サイトもご紹介いただき有難うございます。今一度コードを自分なりに整理して質問させてください。