Jquery carousel с неактивными изображениями, все еще на экране ⇐ Jquery

[Anonymous]

Я пытаюсь сделать карусель jQuery без использования плагинов. Я смотрел на переполнение стека и Google, и все они имеют неактивные изображения, которые снимаются с экрана. Я пытаюсь создать карусель с тремя изображениями, где неактивные изображения остаются на экране и немного сжимаются.
Вот скриншот:



[*]




[*]




[*]




[/list]

< /code>
js < /p>
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();
});
});

< /code>
css < /p>
#carousel {
text-align: center;
background: #cdcdcd;
}
#carousel ul {
list-style: none;
}
#carousel li {
display: none;
}


Подробнее здесь: https://stackoverflow.com/questions/241 ... -on-screen