CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Kārlis Millers
Kārlis Millers

Reputation: 674

Custom jquery/js slider animation

Looking for way to build custom jquery/js slider: enter image description here Example direction from left to right:

<div id="slider">
   <div class="item"> Left fade in 1</div>
   <div class="item"> Left fade in 2</div>
   <div class="item"> At center 1</div>
   <div class="item"> At center 2</div>
   <div class="item"> At center 3</div>
   <div class="item"> Right fade out 1</div>
   <div class="item"> Right fade out 2</div>
</div>

3 elements at center, 2 elements at each side make animate with fade in/out..

Maybe someone can give some sample how to write it? Regards.

Upvotes: 4

Views: 301

Answers (1)

Thomas Bolander
Thomas Bolander

Reputation: 3952

Try use slickslider and use transform to transform the edges. I have made a jsFiddle that shows the idea of what i mean. Maybe it can help you on the right way.

.item.left
{
    -webkit-transform: perspective(600px) rotateY(45deg) scale(0.8);
}

.item.right
{
    -webkit-transform: perspective(600px) rotateY(-45deg) scale(0.8);
}

Upvotes: 3

Related Questions