In a previous post, I covered the process of converting a Bootstrap carousel into a full screen carousel with a random initial image. Today, I'll build on that and show you how to use GSAP (GreenSock Animation Platform), a popular JavaScript library, for animating Bootstrap carousels.
Before going any further, let's look at what we'll be building. There's also a demo at the end of the article.
Note: We'll use Bootstrap 3 styles to create the carousel. However, there's also a second version of it available which is compatible with Bootstrap 4 alpha release (latest release at the time of this writing).
Building the Carousel
Be sure to include Bootstrap and jQuery (Bootstrap's JavaScript components require it) in your page, for example, from a CDN:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Using GSAP to Animate Bootstrap 3 Carousels</title>
<link rel="stylesheet" type="text/css" href="http://ift.tt/2apRjw3">
</head>
<body>
...
<script src="http://ift.tt/29Ganm9"></script>
<script src="http://ift.tt/1jAc4pg"></script>
</body>
</html>
Note that Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3.
The basic structure of our carousel looks like this:
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- first slide -->
<div class="item first active" id="1">
<!-- content here -->
</div>
<!-- second slide -->
<div class="item second" id="2">
<!-- content here -->
</div>
</div><!-- /carousel-inner -->
</div>
As you can see, it contains two slides. The first slide has a class of first and an id of 1, while the second one has a class of second and an id of 2.
Regarding their styles:
- We set their height equal to the viewport height and
- give them different background colors.
The associated CSS rules:
.item {
height: 100vh;
}
.first {
background: #D98F4F; /*orange*/
}
.second {
background: #2c9cae; /*lightblue*/
}
This should be enough to give us a working carousel.
Building the First Slide
Next, we take advantage of Bootstrap's helper classes (e.g. grid classes) to set up the contents for our slides.
The markup for the first slide is the following:
<div class="item first active" id="1">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col col-xs-6">
<h2 class="title">
<!-- content here -->
</h2>
<p class="desc">
<!-- content here -->
</p>
<ul class="list">
<!-- list items here -->
</ul>
</div>
<div class="col col-xs-6">
<div class="pc-wrapper">
<img class="pc" src="IMG_PATH" alt="" width="" height="">
<div class="price">
<!-- content here -->
</div><!-- /price -->
</div><!-- /pc-wrapper -->
<img class="keyboard" src="IMG_PATH" alt="" width="" height="">
<button type="button" class="btn btn-danger btn-lg">
<!-- content here -->
</button>
</div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /carousel-caption -->
</div><!-- /item -->
If you're following along, be sure to replace IMG_PATH with something sensible. You can grab the URLs for the images from the final demo.
Here's its visualization:
Building the Second Slide
In the same way, here's the markup for the second slide:
Continue reading %Animating Bootstrap Carousels with the GSAP Animation Library%
by George Martsoukos via SitePoint
No comments:
Post a Comment