CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TDsouza
TDsouza

Reputation: 938

Make images scroll within div

ok I'v googled a lot and found nothing that helps

I have a set of images within a div and I want them to scroll in a loop I'm new to javascript and Jquery but im open to using it..

The html is simple:

<div id="slideshow">
  <img src="path/to/image" />
  <img src="path/to/image" />
  more images here
</div>

I'm also open to any other effect besides 'scroll' exept fade as I've used it on the same page already.

Upvotes: 0

Views: 677

Answers (3)

MarGa
MarGa

Reputation: 731

think about some style:

<div id="slideshow" style="overflow-y: scroll; height: **whatever**; ">

Upvotes: 1

S. Swaroop
S. Swaroop

Reputation: 431

you can use jquery carousel or you can use jquery apis like slideIn, slideOut, fadeIn, fadeOut to create your own animation effect.

Upvotes: 1

silly
silly

Reputation: 7887

play with overflow! like this

<div id="slideshow" style="width: 300px; height: 100px; overflow: auto">
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />v
    more images here
</div>

Upvotes: 1

Related Questions