Slider with visible slides from sides and costum animation - html

Question

1. slider animation shema n1
2. slider animation shema n2
Imagine that there are two sliders one behind another. Both moves synchroniously, to the same side. The first one moves with inertion, to strech, and the bottom one (the main one) starts moving from start.
3. This is how it should look like in browser
4. This is what I have achieved so far
HTML
<div id="ghostCarousel">
<div id="content">
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
<div>
<img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" />
</div>
</div>
<div class="bg-block"></div>
<div id="gcNav">
</div>
CSS
html, body {
padding:0;
margin:0;
}
#ghostCarousel {
overflow: hidden;
/*position: relative;*/
}
#ghostCarousel #content > div {
width: 820px;
height: 330px;
float: left;
position: relative;
/* nuemus padding reikia padding ploti nustatyt i 0*/
padding-left:15px;
padding-right: 15px;
/*z-index: 99;*/
}
#ghostCarousel #content > div > img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 10+, Firefox on Android */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
/*z-index: 99;*/
}
#content .active {
z-index: 9999;
}
#content .active img {
/*background: #FFF;*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
-webkit-filter: grayscale(0%) !important;
}
.bg-block {
width:880px;
height: 500px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -440px;
background: #FFF;
/*z-index: 100;*/
}
#gcNav {
width: 960px;
position: absolute;
top: 135px;
left: 50%;
/* move the left edge to the center … */
margin-left: -480px;
/* … and move it to the left half the box’ width. */
/*z-index: 9999;*/
}
#gcNav a {
display: block;
width: 40px;
height: 80px;
background: url("http://bisonai.infoaleja.lt/wp-content/themes/bisonai/img/controls.png") no-repeat;
}
#gcNav .left {
background-position: 0 0;
float: left;
}
#gcNav .right {
background-position: -40px 0;
float: right;
}
JS
$(function () {
var content = '#ghostCarousel #content';
var section = content + ' > div';
var v = $(window).width();
var w = $(section).width();
var c;
var itemuKiekis = $('#content div').length;
var vidurinioNr;
var paddingPlotis = 30;
var itemuSarasas = [];
function ghostCarousel() {
for (var i = 1; i <= itemuKiekis; i++) {
itemuSarasas[i] = $('#content div:nth-child(' + (i) + ')').html();
$('#content h3').hide();
$('#content p').hide();
//console.log(itemuSarasas[i]);
}
if (itemuKiekis % 2 === 0) {
c = ((w + paddingPlotis) * $(section).length - v + w) / 2;
vidurinioNr = itemuKiekis / 2 + 1;
var index = 1;
for (var i = vidurinioNr; i <= itemuKiekis; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
$('#content div:nth-child(' + index + ')').html(itemuSarasas[i]);
console.log("i:" + i + " index:" + index);
index++;
}
for (var i = 1; i <= vidurinioNr; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
console.log("i:" + i + " index:" + index);
index++;
}
} else {
c = ((w + paddingPlotis) * $(section).length - v) / 2;
vidurinioNr = (itemuKiekis + 1) / 2;
var index = 1;
for (var i = vidurinioNr; i <= itemuKiekis; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
//console.log("i:" + i);
index++;
}
for (var i = 1; i < vidurinioNr; i++) {
$('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
console.log("i:" + i);
index++;
}
}
$('#content div:nth-child(' + vidurinioNr + ')').attr("class", "active");
console.log("v:" + v);
console.log("w:" + w);
console.log("c:" + c);
console.log("itemuKiekis:" + itemuKiekis);
console.log("vidurinioNr:" + vidurinioNr);
//TODO: keisti ilgi kad tilptu visos ft, jei netelpa
$(content).width((w + paddingPlotis * 2) * $(section).length);
$(content).css('margin-left', -c);
$('#gcNav a.left').click(function (e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$('#content .active h3').fadeOut();
$('#content .active p').fadeOut();
$('#content div:nth-child(' + (vidurinioNr + 1) + ')').attr("class", "active");
$('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");
$(content).animate({
marginLeft: '-=' + w
}, 500, function () {
var first = $(section).eq(0);
$(section).eq(0).remove();
$(this).animate({
marginLeft: '+=' + w
}, 0);
$(this).append(first);
$('#content .active h3').fadeIn();
$('#content .active p').fadeIn();
});
});
$('#gcNav a.right').click(function (e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$('#content .active h3').fadeOut();
$('#content .active p').fadeOut();
$('#content div:nth-child(' + (vidurinioNr - 1) + ')').attr("class", "active");
$('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");
$(content).animate({
marginLeft: '+=' + w
}, 500, function () {
var end = $(section).length - 1;
var last = $(section).eq(end);
$(section).eq(end).remove();
$(this).animate({
marginLeft: '-=' + w
}, 0);
$(this).prepend(last);
//$('#content div:nth-child(' + vidurinioNr + ')').attr("class","active");
$('#content .active h3').fadeIn();
$('#content .active p').fadeIn();
});
});
}
ghostCarousel();
$(window).resize(function () {
v = $(window).width();
w = $(section).width();
c = ((w + paddingPlotis) * $(section).length - v) / 2;
$(content).css('margin-left', -c);
});
});
working jsfiddle example - http://jsfiddle.net/V9RyW/
If you check fiddle, you will see that pictures make straight line and goes one by one when clicked. Also, the incoming photo gets 'active' class.
How to modify the code, that 1/3 of 3rd and 5th slide in n1 scheme would be hidden behind 4?
Also, how to achieve animation like in shema n2?

Answer 1

This question is quite broad but you can do something like
li{
display:inline-block;
}
li .arrows{
position:relative;
top:50%;
}

Answer 2

I found a JavaScript library called SimplyScroll that allows a group of images to be manually scolled from side-to-side, which appears to be your intention here.
I also found a working example that appears to meet your exact specifications.