Javascript 屏幕上仍显示非活动图像的jquery旋转木马

我正在尝试在不使用插件的情况下制作一个jQuery旋转木马。我看过stackoverflow和google，它们都有非活动图像离开屏幕。我正在尝试创建一个包含三个图像的旋转木马，其中非活动图像保留在屏幕上并稍微缩小*

这是一个

按下向右箭头时，左图像移到中心，右图像移到最左侧位置，中心图像移到右侧，反之亦然

我该怎么做呢

类似这样的东西，除了它是水平的箭头和显示非活动图像以及

对不起，如果我的语言不好，英语不是我的第一语言

先谢谢你

html

css

<div id="carousel">
<ul id="carouselNav">
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 1" /></a>
    </li>
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 2" /></a>
    </li>
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 3" /></a>
    </li>
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 4" /></a>
    </li>
</ul>
</div>

jQuery(document).ready(function(){
/**
 * Check if first li element is hidden
 * then show
 */
if( jQuery('#carouselNav li:first-child').is(':hidden') ) {
    // Toggle visibility
    jQuery('#carouselNav li:first-child').toggle();
}
// Interval time
var carouselInterval = 5000;
// Slider
function carouselSlide(){
    // Check if last element was reached
    if( jQuery('#carouselNav li:visible').next().length == 0 ) {
        // Hide last li element
        jQuery('#carouselNav li:last-child').slideUp('fast');
        // Show the first one
        jQuery('#carouselNav li:first-child').slideDown('fast');
    } else {
        // Rotate elements
        jQuery('#carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
    }
}
// Set Interval
var carouselScroll = setInterval(carouselSlide,carouselInterval);
// Pause on hover
jQuery('#carousel').hover(function() {
    clearInterval(carouselScroll);
}, function() {
    carouselScroll = setInterval(carouselSlide,carouselInterval);
    carouselSlide();
});
});

#carousel {
    text-align: center;
    background: #cdcdcd;
}
#carousel ul {
    list-style: none;
}
#carousel li {
    display: none;
}