ddd.html

<div class="serpi-inject-results-wrap many-results scrollable-images">
<a href="javascript:void(0);" class="hp-b prev-serpi">←</a>
<a href="javascript:void(0);" class="hp-b next-serpi">→</a>

<script type="text/javascript">
    var onImageLoad = function(img, cb) {
        var done,
            loaded = function() {
                if (!done){
                    done = true;
                    cb.call(img);
                }

            },
            checkCache = function() {
                if (img.complete){
                    loaded();
                }
            };
        $(img).bind('load', function() {
            loaded();
        });
        if (!img.src){
            setTimeout(checkCache, 100);
        } else{
            checkCache();
        }

        return img;
    };

    $(function() {
        var con = $('.scrollable-images');
        var bnext = con.find('.next-serpi');
        var bprev = con.find('.prev-serpi');

        var scmc  = con.find('.images-scroller'),
            mobil = scmc.find('.images-scroller-mobil'),
            irs   = scmc.find('.serpi-inject-ii');

        var total_width;

        var isEdgeElem = function(el, view_port_width, mobil_pos_shift, next) {
            var cur = $(el);

            var position = cur.position().left;
            var width = cur.outerWidth();


            if ( next ? ((position + width) > (view_port_width + mobil_pos_shift)) : (position < mobil_pos_shift)){
                return {
                    el: cur,
                    left: position,
                    owidth: width
                };
            }
        };

        var getTargetPos = function(last_visible, view_port_width, next) {
            var pos = -last_visible.left + (view_port_width - last_visible.owidth)/2;
            return next ? Math.max(pos, -(total_width - view_port_width)) : Math.min(pos, 0);
        };

        bnext.click(function() {
            mobil.stop(false, true);

            var last_visible,
                view_port_width = scmc.width(),
                mobil_pos_shift = -parseFloat(mobil.css("margin-left")) || 0;

            for (var i = 0; i < irs.length; i++) {

                last_visible = isEdgeElem(irs[i], view_port_width, mobil_pos_shift, true);
                if (last_visible){
                    break;
                }

            };

            if (last_visible){
                mobil.animate({
                    "margin-left": getTargetPos(last_visible, view_port_width, true) + 'px'
                }, 150);
            }

            return false;
        });

        bprev.click(function() {
            mobil.stop(false, true);

            var last_visible,
                view_port_width = scmc.width(),
                mobil_pos_shift = -parseFloat(mobil.css("margin-left")) || 0;

            for (var i = irs.length - 1; i >= 0; i--) {
                last_visible = isEdgeElem(irs[i], view_port_width, mobil_pos_shift);
                if (last_visible){
                    break;
                }
            };
            if (last_visible){
                mobil.animate({
                    "margin-left": getTargetPos(last_visible, view_port_width) + 'px'
                }, 150);

            }
            return false;
        });



        var ir_load = [];

        var randomColor = function() {
            var rgb = [0,0,0];
            for (var i = 0; i < rgb.length; i++) {
                rgb[i] = Math.round(Math.random()*255).toString(16)
            };
            return rgb.join('');
        };
        irs.each(function(i, el) {
            var ir = $(el),
                img = ir.find('img');

            var defer = $.Deferred();
            ir_load.push(defer);



            onImageLoad(img[0], function() {
                defer.resolve()
            });
            img.bind('error', function() {
                irs.hide();
                defer.reject();
            });

        });


        var getTotalWidth = function() {
            var width = 0;
            irs.each(function(i ,el) {
                width += $(el).outerWidth(true);
            });
            return width;
        };

        $.when.apply($, ir_load).always(function() {
            //console.log('done')
            //console.log(ir_load);

            total_width = getTotalWidth();
            mobil.css({
                width: total_width + 'px'
            });
            mobil.addClass('imagemobil');
        })
    })
</script>

<style type="text/css">
.serpi-images .serpi-inject-results-wrap{
    display: block;
    }
    .images-scroller{
        overflow:hidden;
        height:200px;
        position: relative;
        }
        .images-scroller img{
            max-width:200px;
            }
    .imagemobil{
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        }
</style>

<div class="images-scroller">
    <div class="images-scroller-mobil imagemobil" style="width: 2967px; margin-left: -956.5px; ">
                        <div class="serpi-inject-ii">
            <a href="http://s54.radikal.ru/i146/1102/cd/c028f914e93e.jpg" title="o masina - Imagini - Trilulilu " target="_blank">
                <img src="http://im8-tub-ru.yandex.net/i?id=463246276-02-72" alt="o masina - Imagini - Trilulilu ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://part215.avto-tuning-kartinki.ru/images/0/154.jpg" title="GM, Hummerı Çinlilere satıyor " target="_blank">
                <img src="http://im2-tub-ru.yandex.net/i?id=410023928-44-72" alt="GM, Hummerı Çinlilere satıyor ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://articlesofton.files.wordpress.com/2009/03/kia_ceed.jpg" title="Kia Cee'd - 2. El Araba - İstanbul - 12.000 TL 871440 " target="_blank">
                <img src="http://im0-tub-ru.yandex.net/i?id=926816376-40-72" alt="Kia Cee'd - 2. El Araba - İstanbul - 12.000 TL 871440 ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://i.smartphone.ua/img/wp/885/15.jpg" title="Japon bombası hazır.  - Son Haberler Arabam.com'da " target="_blank">
                <img src="http://im3-tub-ru.yandex.net/i?id=264422152-53-72" alt="Japon bombası hazır.  - Son Haberler Arabam.com'da ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://images.asteza.kz/2010-09-12/6728/photos0-800x600.jpeg" title="velocitymania.files.wordpress.com/2010/03/tuned_car_babe_585.jpg?w=450&amp;h..." target="_blank">
                <img src="http://im0-tub-ru.yandex.net/i?id=299242266-39-72" alt="velocitymania.files.wordpress.com/2010/03/tuned_car_babe_585.jpg?w=450&amp;h...">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://autoinsuranceail.info/autoinsurance-images/autoinsurance-155.jpg" title="images.thecarconnection.com/tmb/2003_porsche_cayenne_100005466_t.gif" target="_blank">
                <img src="http://im0-tub-ru.yandex.net/i?id=424687268-05-72" alt="images.thecarconnection.com/tmb/2003_porsche_cayenne_100005466_t.gif">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://carpic.narod.ru/main_2/Mini_Cooper_S_JC-1-a.jpg" title="www.canim.net/araba/images/Mini_cooperS_82_1024x768.jpg" target="_blank">
                <img src="http://im3-tub-ru.yandex.net/i?id=184250738-65-72" alt="www.canim.net/araba/images/Mini_cooperS_82_1024x768.jpg">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://cs301112.vk.com/u140530196/-6/x_a221b410.jpg" title="Видео " тачки"="" "="" target="_blank">
                <img src="http://im7-tub-ru.yandex.net/i?id=49682374-62-72" alt="Видео " тачки"="" "="">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://2pda.kz/pictures_kat/avto/011.jpg" title="images.zwani.com/graphics/cars/images/xcaraddict.gif" target="_blank">
                <img src="http://im6-tub-ru.yandex.net/i?id=65902644-33-72" alt="images.zwani.com/graphics/cars/images/xcaraddict.gif">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://part865.avto-tuning-kartinki.ru/images/0/124.jpg" title="Hummer H2 (2008) " target="_blank">
                <img src="http://im2-tub-ru.yandex.net/i?id=338245071-09-72" alt="Hummer H2 (2008) ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://www.kolesa.ru/st/media/img/2010/01/30/68324_1264835898_49109x497259_s800x600.jpg" title="Продам ВАЗ Lada Samara 113 Алматы " target="_blank">
                <img src="http://im7-tub-ru.yandex.net/i?id=370231380-24-72" alt="Продам ВАЗ Lada Samara 113 Алматы ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://meteocar.ru/uploads/posts/articles/283.jpg" title="ford - itü sözlük görseller " target="_blank">
                <img src="http://im4-tub-ru.yandex.net/i?id=396204267-61-72" alt="ford - itü sözlük görseller ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://img-fotki.yandex.ru/get/5006/lenivova-elena.10d/0_6cdc6_47e8bf77_XL.jpg" title="img-fotki.yandex.ru/get/5006/lenivova-elena.10d/0_6cdc6_47e8bf77_XL.jpg" target="_blank">
                <img src="http://im2-tub-ru.yandex.net/i?id=268412342-04-72" alt="img-fotki.yandex.ru/get/5006/lenivova-elena.10d/0_6cdc6_47e8bf77_XL.jpg">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://www.rsportscars.com/foto/11/lancerevo08_01.jpg" title="www.autoclub.com.au/uploaded_images/mitsubishi-lancer-evo-x-2008-792495..." target="_blank">
                <img src="http://im7-tub-ru.yandex.net/i?id=47600388-32-72" alt="www.autoclub.com.au/uploaded_images/mitsubishi-lancer-evo-x-2008-792495...">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://part285-page2.avto-tuning-kartinki.ru/images/0/017.jpg" title="Truth lost in translation " target="_blank">
                <img src="http://im7-tub-ru.yandex.net/i?id=422484448-25-72" alt="Truth lost in translation ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://y.delfi.ua/norm/7530/202896_s83om1.jpeg" title="img-fotki.yandex.ru/get/21/133599493.49b/0_737c8_c2c01b80_XL" target="_blank">
                <img src="http://im6-tub-ru.yandex.net/i?id=447336777-51-72" alt="img-fotki.yandex.ru/get/21/133599493.49b/0_737c8_c2c01b80_XL">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://razrem.ru/foto/original/razrem_ru/241047.jpg" title="Poze BMW X6 2008: Poza 30 - Masini Noi " target="_blank">
                <img src="http://im5-tub-ru.yandex.net/i?id=75176816-17-72" alt="Poze BMW X6 2008: Poza 30 - Masini Noi ">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://mortgagesandloans.org/wp-content/uploads/2009/03/bad-credit-auto-loans.jpg" title="mortgagesandloans.org/wp-content/uploads/2009/03/bad-credit-auto-loans.jpg" target="_blank">
                <img src="http://im6-tub-ru.yandex.net/i?id=192064467-69-72" alt="mortgagesandloans.org/wp-content/uploads/2009/03/bad-credit-auto-loans.jpg">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://boardfreeads.com/files/images/340/34/5240edba899afad539a8d743819_34034_p0.jpg" title="bm.img.com.ua/img/prikol/images/large/9/0/74909_73380.jpg" target="_blank">
                <img src="http://im0-tub-ru.yandex.net/i?id=121283272-58-72" alt="bm.img.com.ua/img/prikol/images/large/9/0/74909_73380.jpg">
            </a>
        </div>
                        <div class="serpi-inject-ii">
            <a href="http://www.beluys.com/avto/11.jpg" title="img.webme.com/pic/i/iconvar/014.png" target="_blank">
                <img src="http://im2-tub-ru.yandex.net/i?id=12231673-12-72" alt="img.webme.com/pic/i/iconvar/014.png">
            </a>
        </div>
                    </div>
</div>
</div>