Hello people,
I’m running a Javascript carousel with HTML and CSS,
I’ve build the Carousel so that it shows 3 items, 1 left, 1 center and 1 right.
I’ve build an example to show you the problem;
http://shadow.get-gaming.net/
The carousel is layed out like this:
html
</div>
<!--Internet Explorer needs this-->
<div class="clear"></div>
</div>
css
.image-shown
{
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
display: inline-block;
height: 100%;
z-index: 5;
}
.image-hidden
{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-ms-transform: rotateY(90deg); /* IE 9 /
-webkit-transform: rotateY(90deg); / Chrome, Safari, Opera */
transform: rotateY(90deg);
height: 0;
float: left !important;
}
#a-img {
width: inherit;
height: inherit;
}
.image-left
{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
display: inline-block;
opacity: 0.5;
height: 80%;
float: left;
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
}
.image-right
{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
display: inline-block;
opacity: 0.5;
height: 80%;
float: right;
-ms-transform: rotate(7deg) rotateY(10deg); /* IE 9 */
-webkit-transform: rotate(7deg) rotateY(10deg); /* Chrome, Safari, Opera */
transform: rotate(7deg) rotateY(10deg);
z-index: 2;
}
.carousel-outer
{
width: 100%;
text-align: center;
}
.carousel-buttons
{
margin-top: 30%;
width: 100%;
height: 50px;
}
.carousel-inner
{
height: 300px;
text-align: center;
overflow: hidden;
}
.prevLink
{
float: left;
}
.nextLink
{
float: right;
}
JavaScript
$(document).ready(function(){
$(".nextLink").on("click", function(e){
var currentActiveImage = $(".image-shown");
var previousActiveImage = currentActiveImage.prev();
var nextActiveImage = currentActiveImage.next();
var nextImageRight = nextActiveImage.next();
if(nextActiveImage.length == 0) {
nextActiveImage = $(".carousel-inner a").first();
nextImageRight = nextActiveImage.next();
}
if(nextImageRight.length == 0) {
nextImageRight = $(".carousel-inner a").first();
}
if(previousActiveImage.length == 0) {
currentActiveImage = $(".carousel-inner a").first();
$(".carousel-inner a").last().removeClass("image-left").addClass("image-hidden");
}
currentActiveImage.removeClass("image-shown").addClass("image-left");
previousActiveImage.removeClass("image-left").addClass("image-hidden");
nextImageRight.removeClass("image-hidden").addClass("image-right");
nextActiveImage.removeClass("image-right").addClass("image-shown");
e.preventDefault();
});
});
This works fine aslong as i am scrolling through it, untill i reach the point that List item 5 has the class- image-left and i execute the Javascript;
It gives the first item → (the Red image) a Float: left; while the last item → (the Yellow image) also has a Float: left; making Red go to the left and Yellow hangs on to it on the right side while animating (this is the only one that is giving me this trouble…)
I Hope this is not too much information and its possible to fix with something i haven’t seen yet.
Thanks in advance!
I have the example ready right now at
shadow building webspace