CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user2061217
user2061217

Reputation:

Bootstrap carousel zoom transition

I have images in Bootstrap carousel and as a transition effect I want to zoom active image and then show the next image. Like this - http://cssdeck.com/labs/solitary-css3-slider-zoom-transition, but only with zoom of active slide.

I tried to change Bootstrap's css, but this doesn't scale the active slide, but the next one.

.carousel-inner .item{
  transition-property: transform;
  transform: scale(1);
}

.carousel-inner .item.active{
  transform: scale(1.5);
}

/* turning off the default transition effect */
.next,
.prev,
.active.left,
.active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

The problem is when slide.bs.carousel event occures the next slide is already the active one and I want the zoom effect before switching to another carousel's slide.

Maybe triggering the effect with js before the next slide is shown would help.

How can I achieve this?

Upvotes: 1

Views: 5819

Answers (1)

StatiX
StatiX

Reputation: 874

Here is what you need : http://codepen.io/statix/pen/dNLMXB

Simply create carousel-item with responsive image inside and this transition :

.carousel-holder .carousel-item {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.carousel-holder .carousel-item .img-responsive {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    transform: perspective(100vw) translateZ(15vw);
    opacity: 0;
}

.carousel-holder .carousel-item.active .img-responsive {
    opacity: 1;
    transform: perspective(100vw) translateZ(0);
}

Enjoy ;)

Upvotes: 1

Related Questions