CODEWITHSUNDEEP
css
Googlebot
Googlebot

Reputation: 15673

Infinite Image slider with pure CSS3

There are numerous example of sliders made by CSS3, but almost all of them needs click trigger to change the slide. I wonder if it is possible to make a auto-slider, which continuously and indefinitely change the slides.

For example, consider a structure as

<div class="parent">
    <div class="child">
       First DIV
    </div>
    <div class="child">
       Second DIV
    </div>
    <div class="child">
       Third DIV
    </div>
</div>

with CSS

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.child {
    width: 100%;
    height: 100%;
    float: left;
}

can we continueously scroll the child elements inside the parent frame?

Upvotes: 2

Views: 8748

Answers (2)

hakan
hakan

Reputation: 3534

You are asking for pure CSS3? Then this is what you are looking for:

CSS3 image slider

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157324

As you suggested, that I should answer instead of a comment so here it goes, you can refer to a source here - http://css3.bradshawenterprises.com/cfimg/ which uses CSS3 animations to swap the images.

Though I would suggest you to use jQuery or JS instead of CSS3 animations due to cross browser support especially when it comes to IE.

Upvotes: 5

Related Questions