"Vertical Slider"
Bootstrap 3.3.0 Snippet by vivekbisht109

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!----> <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900|Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet"> <section id="rapid"> <div class="container"> <div class="row"> <div class="slider-wrap"> <div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel"> <div class="col-md-6"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> <h3><span>Top Tier <br/>Professional</h3> </li> <li data-target="#carousel-example-generic" data-slide-to="1"> <h3><span>Rapid response<br/>To Needs</span></h3> </li> <li data-target="#carousel-example-generic" data-slide-to="2"> <h3><span>National Network<br/>of Talent</span></h3> </li> </ol> </div> <div class="col-md-6"> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="" id="tab1"> <div class="text-wrap"> <h2>High Quality</h2> <ul class=""> <li class="">Three Levels of Screening </li> <li class="">World-Class Service</li> <li class="">Domain Expertise</li> </ul> </div> <img src="http://via.placeholder.com/350x150" alt="tab1" class="img img-responsive"> </div> </div> <div class="item"> <div class="" id="tab1"> <div class="text-wrap"> <h2>High KJFBkjbkj</h2> <ul class=""> <li class="">Three Levels of Screening </li> <li class="">World-Class Service</li> <li class="">Domain Expertise</li> </ul> </div> <img src="http://via.placeholder.com/350x150" alt="tab1" class="img img-responsive"> </div> </div> <div class="item"> <div class="" id="tab1"> <div class="text-wrap"> <h2>High sdfgdgdlk</h2> <ul class=""> <li class="">Three Levels of Screening </li> <li class="">World-Class Service</li> <li class="">Domain Expertise</li> </ul> </div> <img src="http://via.placeholder.com/350x150" alt="tab1" class="img img-responsive"> </div> </div> </div> </div> </div> </div> </div> </div> <a class="scroll white" href="#wasting"><span></span></a> </section>
#rapid .panel-default:hover .panel-title { color: #01A759; } #rapid { padding: 5% 0; } #rapid .panel-default:hover .panel-title { color: #01A759; } #rapid .panel-default .panel-title * { font: 300 25px/37px montserrat; color: #7c7c7c; } #rapid .panel-default { box-shadow: none; border: none; } #rapid .carousel-indicators li h3:hover span, #rapid .carousel-indicators li.active h3 span{ font: 500 25px/37px montserrat; color: #01A759; transition: .5s; } #rapid .panel-default .panel-title span { display: inline-block; margin: 0 0 0 3rem; transition: .5s; } #rapid .carousel-indicators li h3::before { content: ''; background-image: url(../img/sprite.png); width: 55px; height: 45px; display: inline-block; float: left; margin: 0 0px 0px auto; background-size: 260%; background-repeat: no-repeat; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } #rapid .carousel-indicators li:first-of-type h3::before { background-position: 16px 12px; } #rapid .carousel-indicators li:first-of-type h3:hover::before, #rapid .carousel-indicators li:first-of-type.active h3::before { background-position: 16px -32px; } #rapid .carousel-indicators li:nth-child(2) h3::before { background-position: -42px 6px; } #rapid .carousel-indicators li:nth-child(2) h3:hover::before, #rapid .carousel-indicators li:nth-child(2).active h3::before { background-position: -42px -34px; } #rapid .carousel-indicators li:last-of-type h3::before { background-position: -94px 5px; } #rapid .carousel-indicators li:last-of-type h3:hover::before, #rapid .carousel-indicators li.active:last-of-type h3 .panel-title::before { background-position: -94px -34px; } #rapid .text-wrap h2 { font: 700 30px/37px montserrat; color: #7c7c7c; margin: 0 0rem 2rem auto; letter-spacing: 6px; position: relative; } #rapid .text-wrap h2::after { content: ''; border-bottom: 1px solid #7c7c7c; width: 100px; position: absolute; bottom: -13px; left: 0; } #rapid .text-wrap ul { padding: 0 0 0 2rem; font: 300 20px/37px montserrat; color: #7c7c7c; margin: 0 0 1rem auto; } #rapid .text-wrap ul li { color: inherit; } #rapid .carousel-indicators { position: unset; width: auto; margin: 0; } #rapid .carousel-indicators li { display: block; width: 100%; text-align: left; background: transparent; margin: 0; height: auto; border-radius: 0; font: 300 25px/37px montserrat; color: #7c7c7c; border: none; padding: 10px 15px; } #rapid .carousel-indicators li h3 { display: block; color: inherit; text-align: left; text-indent: 0; } #rapid .carousel-indicators li h3 span { display: inline-block; margin: 0 0 0 20px; } .carousel.vertical .carousel-inner .item { -webkit-transition: 0.6s ease-in-out top; -moz-transition: 0.6s ease-in-out top; -ms-transition: 0.6s ease-in-out top; -o-transition: 0.6s ease-in-out top; transition: 0.6s ease-in-out top; } .carousel.vertical .active { top: 0; } .carousel.vertical .next.left, .carousel.vertical .prev.right { top: 0; } .carousel.vertical .active.left, .carousel.vertical .prev { top: -100%; } .carousel.vertical .next,.carousel.vertical .active.right { top: 100%; } .carousel.vertical .item { left: 0; } /*From Bootstrap Version 3.7.7*/ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner>.item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px } .carousel-inner>.item.active.right, .carousel-inner>.item.next { left: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } .carousel-inner>.item.active.left, .carousel-inner>.item.prev { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } }

Related: See More


Questions / Comments: