Как решить проблему отображения Preview?

Question

DiegoKKC @DiegoKKC

Как решить проблему отображения Preview?

Имеет слайдер. При наведение на кнопки контроля, должны выводиться preview, но не получается. Можете подсказать причину?

<!document html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="css/StyleSheet.css" rel="stylesheet" type="text/css"/>
        <script src="js/javascript.js" type="text/javascript"></script>
        <script>
            var sliders = [];
            $('.slider').each(function() {
                sliders.push(new Slider(this));
            });
        </script>
    </head>
    <body>
        <div id="slider-wrap">
            <div id="slider">
                <div class="slide"><img src="img/slider/1.jpg" alt=""/></div>
                <div class="slide"><img src="img/slider/2.jpg" alt=""/></div>
                <div class="slide"><img src="img/slider/3.jpg" alt=""/></div>
                <div class="slide"><img src="img/slider/4.jpg" alt=""/></div>
                <div class="slide"><img src="img/slider/5.jpg" alt=""/></div>
            </div>
        </div>
    </body>
</html>

#slider-wrap{ /* Оболочка слайдера и кнопок */
    width:1620px; 
    }
#slider{ /* Оболочка слайдера */
    width:1600px;
    height:900px;
    overflow: hidden;
    border:#eee solid 10px;
    position:relative;}
.slide{ /* Слайд */
    width:100%;
    height:100%;
    }
.slide img{
    width:100%;
    height:100%;
    }
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */
    display:block;
    width:35px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background:url("../img/slider/prev_button.png") no-repeat 50% 50%;
    opacity:0.8;
    z-index:3;
    outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
    right:10px;
    background:url("../img/slider/next_button.png") no-repeat 50% 50%;}
#prewbutton:hover, #nextbutton:hover{
    width: 230px;
    opacity:1;
    background: url("../img/slider/next_button_hover.png") no-repeat 50% 50%;
}
#prewbutton:hover{
    background: url("../img/slider/prev_button_hover.png") no-repeat 50% 50%;
}
#preview_prev, #preview_next{
    display: none;
    width: 195px;
    height: 140px;
    overflow: hidden;
}
#preview_prev img, #preview_next img{
    height: 100%;
    width: 100%;
}
#nextbutton:hover #preview_prev,#nextbutton:hover #preview_next{
display: inline-block;
}

//----Переменные----//
var hwSlideSpeed = 700;
var hwTimeOut = 7000;
var hwNeedLinks = true;
var slideNum = 0;
var slideTime;
var pause = true;
//----Функции----//
var animSlide = function(arrow){
    clearTimeout(slideTime);
    $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
    if(arrow == "next"){
        if(slideNum == (slideCount-1)){slideNum=0;}
        else{slideNum++}
        }
    else if(arrow == "prew")
    {
        if(slideNum == 0){slideNum=slideCount-1;}
        else{slideNum-=1}
    }
    else{
        slideNum = arrow;
        }
    if(slideNum == 0){
        var slide_prev=(slideCount-1);
        var slide_next=(slideNum +1);
    } else if(slideNum == (slideCount-1)){
        var slide_prev=(slideNum-1);
        var slide_next=0;
    } else{
        var slide_prev=(slideNum-1);
        var slide_next=(slideNum+1);
    };
    $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);

    var url_prev_next=$('.slide img').eq(slide_next).prop('src');
    var url_prev_prev=$('.slide img').eq(slide_prev).prop('src');
    $("#preview_next").html('<img src="'+url_prev_next+'" alt="" />');
    $("#preview_prev").html('<img src="'+url_prev_prev+'" alt="" />');
    $(".control-slide.active").removeClass("active");
    $('.control-slide').eq(slideNum).addClass('active');
};

var rotator = function(){
    if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
            }


$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(0).show();
    slideCount = $("#slider .slide").size();
if(hwNeedLinks){
    var $linkArrow = $('<a id="prewbutton" href="#"><div id="preview_prev"></div><div id="preview_next"></div></a><a id="nextbutton" href="#"><div id="preview_next"></div></a>')
        .prependTo('#slider');
    $('#nextbutton').click(function(){
        animSlide("next");
    });
    $('#prewbutton').click(function(){
        animSlide("prew");
    })
}
animSlide(0);
$('#slider-wrap').hover(    
    function(){clearTimeout(slideTime); pause = true;},
    function(){pause = false; rotator();
    });
rotator();
});