0

I'm trying to add some simple animation to a bootstrap carousel. the code is like the below:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">                
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><img src="img/form3-1.jpg" alt="Chania"></div>
                    <div class="item"><img src="img/form3-2.jpg" alt="Chania"></div>
                    <div class="item"><img src="img/form3-3.jpg" alt="Flower"></div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

what i m trying to do is to make the active slide scale from 1 to 1.5 in a duration of 10s. the css is below:

#myCarousel .active > img{transform:scale(1.5); -webkit-transform: scale(1.5); -webkit-transition: -webkit-transform 10s ease-out;-moz-transition: -moz-transform 10s ease-out;transition: transform 10s ease-out;}

I'm know that the HTML and CSS are correct. But when the page loads, the first slide that appears doesn't scale, but once that slide is changed the rest works perfectly. And even if i go back again to the first slide, it will work again. What I need is on the first load, to fix the animation for the first slide.

Joey
  • 93
  • 2
  • 13

2 Answers2

1

Your code is working correctly. window load time active class is default state. As default state you will not see the animation.

I created snippet and I set data-interval="false" for the stop carousel animation. After load completed if you use left and right carousel control then you will see the animation. Your first click left or right will be the first slide.

Default state isn't first slide.

#myCarousel .active > img{
  transform:scale(1.5);
  -webkit-transform: scale(1.5);
  -webkit-transition: -webkit-transform 10s ease-out;
  -moz-transition: -moz-transform 10s ease-out;
  transition: transform 10s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

I hope it will help you.

Note: data-interval="false" should be remove from production site if you want auto play. (Don't set data-interval="true" for auto play).

Rahul
  • 2,011
  • 3
  • 18
  • 31
  • Thank you Rahul, but actually this doesn't solve my problem since the first slide to show don't animate. – Joey Jan 31 '17 at 09:13
1

You can use keyframes - just use animation that you need

#myCarousel .active > img {
 -webkit-animation: bummer 10s;
  animation: bummer 10s;
 -webkit-transform: scale(0,0); 
 transform: scale(0,0);
}

@-webkit-keyframes bummer {
 100% {
  -webkit-transform: scale(1.5); 
 }
}

@keyframes bummer {
 100% {
  transform: scale(1.5); 
  }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Chania"></div>
                    <div class="item"><img src="http://placehold.it/1920x1080" alt="Flower"></div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>
L. Vadim
  • 539
  • 3
  • 12