CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-cycle
SebastianX
SebastianX

Reputation: 1

JQuery.Cycle Plugin Slide in first image

I'm trying to get JQuery Cycle plugin to apply a slide effect to the first slide. There is an example that shows how to fade it in but I'm using the blindX effect so it would look much nicer if I would slide the image in from right to left on load.

Any ideas?

Thanks,

SebastianX

Upvotes: 0

Views: 1470

Answers (2)

SebastianX
SebastianX

Reputation: 11

Thanks Łukasz. Your answer gave me an idea. Here is how I did it.

CSS - Moved the first slide out of the "animation area"

.slideshow {
   position: relative;
   left: 550px;
   overflow: hidden;}

JavaScript jQuery - $(document).ready

$('.slideshow').animate({marginLeft:'-550px'},1000, function(){
    $('.slideshow').cycle({
        fx: 'blindX',
        timeout: 1000
    });
});

Upvotes: 1

Lukasz
Lukasz

Reputation: 6767

You can do it easily by yourself. Make all slides, except the first one, initially hidden. Then position the first slide in such a way that it will be on the right side of your slideshow viewport (containing element). Then, on load, call animate on it using 'left' property.

HTML

<div id="slides">
  <img>
  <img>
  ...
</div>

CSS

#slides {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

#slides > img {
   position: absolute;
   top: 0;
   left: 0;
   visibility: hidden;
}
#slides > img:first-child {
  left: 100px;
  visibility: visible;
}

JavaScript on load

$('#slides > img:first').animate(
    { left: 0 },
    500,
    function() { $('#slides > img').css('visibility', 'visible');  
});

Upvotes: 1

Related Questions