"Tri-Hero 2"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="carousel slide-one" id="homepageHeroCarousel" style="touch-action: pan-y; -moz-user-select: none;"> <div class="carousel-wrapper"> <div class="slide"> <div class="slide-left"> <h6>Hot on Netflix</h6> <h3><a href="https://media.netflix.com/en/only-on-netflix/188817">My Next Guest Needs No Introduction with David Letterman is now streaming</a></h3> <p><a href="https://media.netflix.com/en/only-on-netflix/188817">Read More <i class="fa fa-angle-right"></i></a> </p> </div> <div class="slide-right"> <a href="https://media.netflix.com/en/only-on-netflix/188817"> <img src="https://d2ygrtdi28m8fp.cloudfront.net/homepage/Homepage_Letterman_Obama_010918.jpg" alt="My Next Guest Needs No Introduction with David Letterman is now streaming"> </a> </div> </div> <div class="slide"> <div class="slide-left"> <h6>Hot on Netflix</h6> <h3><a href="https://media.netflix.com/en/only-on-netflix/81188">One Day at a Time premieres on January 26th</a></h3> <p><a href="https://media.netflix.com/en/only-on-netflix/81188">Read More <i class="fa fa-angle-right"></i></a> </p> </div> <div class="slide-right"> <a href="https://media.netflix.com/en/only-on-netflix/81188"> <img src="https://d2ygrtdi28m8fp.cloudfront.net/homepage/Homepage_ODAAT_S2_010918.jpg" alt="One Day at a Time premieres on January 26th"> </a> </div> </div> <div class="slide"> <div class="slide-left"> <h6>Hot on Netflix</h6> <h3><a href="https://media.netflix.com/en/only-on-netflix/183986">Altered Carbon premieres on February 2nd</a></h3> <p><a href="https://media.netflix.com/en/only-on-netflix/183986">Read More <i class="fa fa-angle-right"></i></a> </p> </div> <div class="slide-right"> <a href="https://media.netflix.com/en/only-on-netflix/183986"> <img src="https://d2ygrtdi28m8fp.cloudfront.net/homepage/Homepage_AlteredCarbon_011618.jpg" alt="Altered Carbon premieres on February 2nd"> </a> </div> </div> </div> <ol class="carousel-navigation" id="carouselNavigation"> <li class="active"><i class="fa fa-circle"></i></li> <li><i class="fa fa-circle"></i></li> <li><i class="fa fa-circle"></i></li> </ol> </div>
@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .carousel {width: 100%;overflow: hidden;border-bottom: 3px solid #e50914;margin-bottom: 1rem;background: #221f1f;} .carousel.slide-one .carousel-wrapper {margin-left: 0;} .carousel .carousel-wrapper {display:flex;width: 300%;transition: all 0.65s 0s cubic-bezier(0.075, 0.82, 0.165, 1);} .carousel .slide {width: 33.333333%;display: flex;box-align: center;flex-align: center;align-items: center;} .carousel .slide-left {padding-left: 2em;padding-right: 1em;} .carousel .slide-right {padding-left: 2em;padding-right: 1em;} .carousel .slide-left, .carousel .slide-right {width: 50%;padding-top: 2em;padding-bottom: 2em;} .carousel .slide h6 {color: #8c8c8c;margin-bottom: 10px;} .carousel .slide h6, .carousel .slide p {font-size: 1.6em;font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;font-style: normal;margin: 0;margin-bottom: 0px;} .carousel .slide h3 {font-size: 2.5em;font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;font-style: normal;margin: 0;margin-bottom: 0px;margin-bottom: 10px;} .carousel .slide h3 a {text-decoration: none;color: #fff;} .carousel .carousel-navigation {list-style: none;padding: 0;margin: 0 0 10px;display: flex;flex-line-pack: center;align-content: center;box-pack: center;flex-pack: center;justify-content: center;} .carousel .carousel-navigation li.active {color: #e50914;} .carousel .carousel-navigation li {color: rgba(255,255,255,0.2);margin-right: 10px;font-size: 1.5em;transition: color 0.25s 0s linear;}

Related: See More


Questions / Comments: