<!--SLIDER FLEX-->
<section class="slider ">
    <div class="flexslider big">
        <ul class="slides">
                            <li data-prev="design/{$settings->theme}/images/preview_5.jpg" data-next="design/{$settings->theme}/images/preview_2.jpg">
                    <a href="#"><img src="design/{$settings->theme}/images/slider1.jpg" alt="" /></a>
                </li>
                            <li data-prev="design/{$settings->theme}/images/preview_1.jpg" data-next="design/{$settings->theme}/images/preview_3.jpg">
                    <a href="#"><img src="design/{$settings->theme}/images/slider2.jpg" alt="" /></a>
                </li>
                            <li data-prev="http://buyshop.ethemeuk.com/magento/media/etheme/buyshop/buyshopflex/preview_2.jpg" data-next="design/{$settings->theme}/images/preview_4.jpg">
                    <a href="#"><img src="design/{$settings->theme}/images/slider3.jpg" alt="" /></a>
                </li>
                            <li data-prev="design/{$settings->theme}/images/preview_3.jpg" data-next="design/{$settings->theme}/images/preview_5.jpg">
                    <a href="#"><img src="design/{$settings->theme}/images/slider4.jpg" alt="" /></a>
                </li>
                            <li data-prev="design/{$settings->theme}/images/preview_4.jpg" data-next="design/{$settings->theme}/images/preview_1.jpg">
                    <a href="#"><img src="design/{$settings->theme}/images/slider5.jpg" alt="" /></a>
                </li>
                    </ul>
        <div class="loader-slider hidden-phone"></div>                <div class="next-slider"><img src="design/{$settings->theme}/images//preview_2.jpg"  alt=""></div>
        <div class="prev-slider"><img src="design/{$settings->theme}/images//preview_5.jpg"  alt=""></div>
            </div>
</section>
<!--SLIDER FLEX EOF-->

{literal}
<script type="text/javascript">
    function TopSlider() {
        /*var w0 = jQuery(document).width();
        var w1 = (w0 - jQuery(".container").width()) * 0.5 - 0;
        var w1 = 50;
        jQuery(".flexslider.big .flex-direction-nav .flex-next").css({
            "right": w1 + "px"
        });
        jQuery(".flexslider.big .flex-direction-nav .flex-prev").css({
            "left": w1 + "px"
        });

                jQuery(".flexslider.big .next-slider").css({
            "right": w1 + "px"
        });
        jQuery(".flexslider.big .prev-slider").css({
            "left": w1 + "px"
        });
        */
    };

    jQuery(function(){


        jQuery('.flexslider.big').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
            animationSpeed: 600,
            direction:"horizontal",
            pauseOnHover: true,
                        start:function(){

                /*jQuery('.loader-slider').animate({'width':jQuery('.flexslider.big').width()+'px'},this.slideshowSpeed-this.animationSpeed,'linear',function(){
                    jQuery(this).hide().css({width:'0'});
                });*/
                jQuery('.loader-slider').stop().animate({'width':jQuery('.flexslider.big').width()+'px'},this.slideshowSpeed-this.animationSpeed);
            },
                        pause:false,

                        before:function(slider){

                jQuery('.loader-slider').hide().css({width:'0'});

            },
                        after:function(slider){

                data_prev=jQuery(slider.slides[slider.currentSlide]).attr('data-prev');
                data_next=jQuery(slider.slides[slider.currentSlide]).attr('data-next');

                                jQuery('.next-slider img').attr('src',data_next);
                jQuery('.prev-slider img').attr('src',data_prev);
                
                                jQuery('.loader-slider').hide();

                if(this.pause)return;
                /*.stop(true)*/
                jQuery('.loader-slider').show().animate({width:jQuery('.flexslider.big').width()+'px'},this.slideshowSpeed-this.animationSpeed,'linear',function(){
                    jQuery('.loader-slider').hide().css({width:'0'});
                });
                

            },

                        pauseOn:function(slider){

                this.pause=true;
                time=jQuery('.loader-slider').width()*this.slideshowSpeed/jQuery('.flexslider.big').width();
                jQuery('.loader-slider').stop(true);
                jQuery('.loader-slider').hide().css({width:'0'});
            },
            pauseOff:function(slider){

                this.pause=false;
                time=(jQuery('.flexslider.big').width()-jQuery('.loader-slider').width())*this.slideshowSpeed/jQuery('.flexslider.big').width();
                //console.log(time);
                jQuery('.loader-slider').stop(true).show().animate({width:jQuery('.flexslider.big').width()+'px'},time,'linear',function(){
                    jQuery('.loader-slider').hide().css({width:'0'});
                });
            },
                    });

                    jQuery(".flexslider.big .flex-direction-nav .flex-prev").hover(function() {
                jQuery(".prev-slider").show();
            },function(){
                jQuery(".prev-slider").hide();
            });
            jQuery(".flexslider.big .flex-direction-nav .flex-next").hover(function() {
                jQuery(".next-slider").show();
            },function(){
                jQuery(".next-slider").hide();

            });
        
        TopSlider();
    })

    jQuery(window).resize(function() {


        TopSlider();
    });


</script>
{/literal}
