Carousel with Html/CSS/JS Float visually breaks Carousel

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

Hi,

I’ve just come back to have a look at this and it seems you have changed the design now. :slight_smile:

I’ll assume that you have abandoned the other approach and are sorted now?

Yes, Sadly enough i couldn’t get it to work though i really hoped to make it work.
I might revisit the try i made before but then i will make use of the trick done with the one i’m using now.
(making the Slider go beyond the visual range, and actually change the list itself)

Maybe make a smaller demo first and get that working rather than a full page.

I should,

I do know what the problem is though.
I had List items 1 to 5 and switched the classes around when you clicked next or previous.
which ment that if item 1 and item 5 had a float left item 1 would always be first.
I didn’t expect this list to do the exact same thing but then just switch the whole List item. Instead of just the class. (which also made it almost impossible to make it work without a Huge workaround)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.