Home/ Questions/Q 6947365
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:41:03+00:00

I am having issues with my jQuery animation using elastislide as you can see

  • 0

I am having issues with my jQuery animation using elastislide as you can see in my DEMO. When you load the page all boxes bar the one on the left hand side load correctly of the clients specifications of -25px. What I would like to do is have all four boxes show correctly. I also have noted when you hover over the last box the tail disappears, this should be the same as the first box.

Homepage jQuery:

$(".es-carousel ul li").hover(function(){
     $(this).children('span').animate({left:"20px"},{queue:false,duration:300});
     $(this).children('b').animate({top:"0px"},{queue:false,duration:300});
}, function() {
 $(this).children('span').animate({left:"20px"},{queue:false,duration:300});
     $(this).children('b').animate({top:"20px"},{queue:false,duration:300});
});

HTML:

<!-- Elastislide Carousel -->
        <div id="carousel" class="es-carousel-wrapper">
            <div class="es-carousel">
                <ul>
                    <li><a href="#"><img src="images/image_14.jpg" alt="image01" /></a><span class="carousel_caption">Lorem ipsum sit amet</span><b>+</b></li>     
                    <li><a href="#"><img src="images/image_14_2.jpg" alt="image02" /></a> <span class="carousel_caption">Sed do eiusmod tempor</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_3.jpg" alt="image03" /></a> <span class="carousel_caption">Tempor ut labore</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_4.jpg" alt="image04" /></a> <span class="carousel_caption">Dolore magna</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_5.jpg" alt="image05" /></a> <span class="carousel_caption">Lorem ipsum sit amet</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_6.jpg" alt="image06" /></a> <span class="carousel_caption">Sed do eiusmod tempor</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_7.jpg" alt="image07" /></a> <span class="carousel_caption">Lorem ipsum sit amet</span><b>+</b></li>
                    <li><a href="#"><img src="images/image_14_8.jpg" alt="image08" /></a> <span class="carousel_caption">Dolore magna</span><b>+</b></li>
                </ul>
            </div>
        </div>
        <!-- End Elastislide Carousel -->

CSS:

.es-carousel-wrapper{padding:40px 0 0 0; position:relative;clear:both;}
.es-carousel{overflow:hidden;}
.es-carousel ul{display:none; padding:0px; margin:0px;}
.es-carousel ul li{height:100%;float:left;display:block; position: relative;}
.es-carousel ul li span.carousel_caption{ position:absolute; bottom:10px; left:-25px; background:url(images/slider_caption_bg.png) no-repeat; width:190px; color: #fff; padding:5px;}
.es-carousel ul li b{ position:absolute; right:0px; top:-20px;background:url(images/slider_caption_bg.png) repeat;color: #fff; padding:3px 5px;}
.es-carousel ul li a{display:block;}
.es-carousel ul li a img{display:block;border:none;max-height:100%;max-width:100%;padding:0px; margin:0px;}
.es-nav{display:none;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like the problem for both the first and the last boxes, is that they are going outside your div with the class “es-carousel” you need to play with it’s width and it’s padding.

    looks like you can fix it by updating your css to this padding.
    would that work?

    .es-carousel-wrapper {
padding-top: 40px;
padding-left: 30px;
position: relative;
clear: both;
}

.es-carousel {
overflow: hidden;
padding: 0 10px 0 25px;
}
    • 0