"Responsive slideshow with quick menu for Indior"
Bootstrap 3.3.0 Snippet by divyalahad

<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="//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> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" id="fw-css"> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row overflownone"> <div class="col-md-3 information nopaddingleft nopaddingright hidden-sm hidden-xs"> <h3 style="padding-left:0px;">Taste of India</h3> <div class="row-fluid"> <div> <!-- This is a repeat on all locations --> <span ng-repeat="location in tourWithAllRelated[0].siteLocation"> <span style="color:white;"> <a style="color:white;" href="/city?id={{ location.id }}&countryid={{ location.country_id }}&name={{ location.city }}">Delhi | Agra | Jaipur</a><span ng-hide="$last"> <i class="fas fa-angle-right fa-sm"></i> </span> </span> </span> </div> <div> <div style="color:white;display:block;"> Regular | Group | Individual </div> <div style="color:white;display:block;"> 8 days | 7 nights </div> <div style="color:white;display:block;"> $550 onwards </div> </div> </div> <ul class="information_menu"> <li class="active" data-id="1"><a href="#"><i class="far fa-images"></i> Photos </a></li> <li data-id="2"><a href="#"><i class="fas fa-video"></i> Videos </a></li> <li data-id="3"><a href="#"><i class="fas fa-map"></i> Map </a></li> </ul> <div class="row" style="padding:5px;"> <span class="btn-group btn-group-justified"> <a ng-click="showEnquiryForm(tourWithAllRelated[0].id, tourWithAllRelated[0].name, tourWithAllRelated[0].price, tourWithAllRelated[0].days);" class="btn btn-default"> Send Enquiry </a> <a ng-click="showBookingForm(tourWithAllRelated[0].id, tourWithAllRelated[0].name, tourWithAllRelated[0].price, tourWithAllRelated[0].days);" class="btn btn-default"> Book Now </a> </span> <div class="col3" style="height:100%"> </div> </div> </div> <div class="col-md-9 nopaddingleft nopaddingright"> <div class="slideshow"> <div class="overlay-id1 overlay-item"> <div id="carousel-example-generic1" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic1" data-slide-to="1"></li> <li data-target="#carousel-example-generic1" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="carousel-caption"> <h3>Test 3.a</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 3.b</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 3.c</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic1" 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="#carousel-example-generic1" 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 class="overlay-id2 overlay-item"> <div id="carousel-example-generic2" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic2" data-slide-to="1"></li> <li data-target="#carousel-example-generic2" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <iframe width="720" height="405" src="https://www.youtube.com/embed/Z8e3BSopTg8" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 1.b</h3> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/CR62t5lPrJ0?rel=0" width="auto">></iframe> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 1.c</h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" width="auto">></iframe> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic2" 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="#carousel-example-generic2" 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 class="overlay-id3 overlay-item"> <div id="carousel-example-generic3" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic3" data-slide-to="1"></li> <li data-target="#carousel-example-generic3" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="carousel-caption"> <h3>Test 2.a</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 2.b</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 2.c</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic3" 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="#carousel-example-generic3" 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 class="overlay-id4 overlay-item"> <div id="carousel-example-generic4" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic4" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic4" data-slide-to="1"></li> <li data-target="#carousel-example-generic4" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="carousel-caption"> <h3>Test 3.a</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 3.b</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item"> <div class="carousel-caption"> <h3>Test 3.c</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic4" 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="#carousel-example-generic4" 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> </div> <!-- Validation --> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fd2DzN" target="_blank"><small>HTML</small><sup>5</sup></a> </p> <!-- <div class="row visible-xs visible-sm "> <div class="col-md-12 mobile-menu-bg"> <ul class="information_menu_mobile"> <li class="active"><a href="#"><i class="fa fa-calendar-plus-o"></i> <span class="hidden-xs">Lorem ipsum</span></a></li> <li><a href="#"><i class="fa fa-commenting-o"></i> <span class="hidden-xs">Praesent posuere</span></a></li> <li><a href="#"><i class="fa fa-medkit"></i> <span class="hidden-xs">Phasellus imperdiet</span></a></li> <li><a href="#"><i class="fa fa-heartbeat"></i> <span class="hidden-xs">In accumsan</span></a></li> </ul> <div class="clearfix"></div> </div> </div> --> </div>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'); html { font-size: 62.5%; } body { font-size: 14px; font-size: 14px; font-size: 1.4rem; background: #f5f5f5; padding-top: 30px; } h3 { font-size: 24px; font-size: 24px; font-size: 2.4rem; } .nopaddingleft { padding-left: 0; } .nopaddingright { padding-right: 0; } .overflownone { overflow: hidden!important; } .information { background: #2a3d46; position: relative; height: 400px; } .information h3 { font-size: 34px; font-size: 3.4rem; font-family: "roboto", sans-serif; font-weight: 500; color: #FFF; padding: 0 15px; } .information .information_menu { padding: 0; } .information .information_menu li { list-style: none; position: relative; } .information .information_menu li.active { background: #0383c5; } .information .information_menu li.active:after { content: ""; width: 0; height: 0; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-left: 22px solid #0383c5; position: absolute; right: -22px; z-index: 1000; top: 0; } .information .information_menu li a { color: #FFF; display: block; padding: 16px 20px; font-size: 15px; font-size: 1.5rem; text-decoration: none; } .information .btn-emergency { background: #f89406; border: none; margin: 20px; display: block; width: 88%; color: #fff; text-shadow: none; padding: 0; font-size: 20px; font-size: 2rem; } .information .btn-emergency span { padding: 15px; display: block; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, .15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.75, rgba(255, 255, 255, .15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear, 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent; -webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; } .mobile-menu-bg { background: #2a3d46; } .information_menu_mobile { margin: 0px; padding: 0; } .information_menu_mobile li { padding: 0; float: left; width: 25%; list-style: none; text-align: center; } .information_menu_mobile li a { display: block; padding: 10px; color: #FFF; text-decaration: none; } .information_menu_mobile li:hover a { background: #0383c5; text-decaration: none; } .slideshow { overflow: hidden; } .slideshow .overlay-item { position: absolute; top: 0; z-index: 999; width: 100%; //background: rgba(248, 148, 6, 0.67); height: 400px; padding: 0px; display: none; -webkit-animation: opendoor 0.75s ease 0s alternate; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .slideshow .overlay-item.active { display: block; -webkit-animation: opendoor 0.75s ease 0s alternate; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .slideshow .overlay-item.inactive { display: block; -webkit-animation: closedoor 0.75s ease 0s alternate; transform-style: preserve-3d; opacity:0; } .slideshow .overlay-item .quickmenu { padding: 0; } .slideshow .overlay-item .quickmenu li { list-style: none; } .slideshow .overlay-item .quickmenu li a { color: #FFF; display: block; padding: 8px 20px; font-size: 15px; font-size: 1.5rem; text-decoration: none; } #slider { padding: 0px; margin: 0px } #slider li { padding: 0px; list-style: none; position: absolute; } #carousel-example-generic { height: 400px } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; filter: alpha(opacity=0); } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; filter: alpha(opacity=100); } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } html, body, .carousel, .carousel-inner, .carousel-inner .item { height: 100%; } .item:nth-child(1) { background: #74C390; } .item:nth-child(2) { background: #51BCE8; } .item:nth-child(3) { background: #E46653; } @-webkit-keyframes animate-stripes { 0% { background-position: 0 0; } 100% { background-position: 60px 0; } } @-webkit-keyframes in { from { -webkit-transform: scale(1.3); } to { -webkit-transform: scale(1); } } @-webkit-keyframes out { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.3); } } @-webkit-keyframes opendoor { from { -webkit-transform: perspective(1000px) rotateY(90deg); -webkit-transform-origin: 0% 50%; } to { -webkit-transform: perspective(1000px) rotateY(0deg); -webkit-transform-origin: 0% 50%; } } @-webkit-keyframes closedoor { from { opacity:1; -webkit-transform-origin: 0% 50%; } to { opacity:0; -webkit-transform-origin: 0% 50%; } }
(function($){ $(document).ready(function() { $(".overlay-id1").addClass("active"); $('.information_menu').find('li').click(function(e) { $('.information_menu').find('li').removeClass('active'); $(this).addClass('active'); $(".overlay-item").removeClass("active"); $(".overlay-item").removeClass("inactive"); $(".overlay-id"+$(this).data("id")).addClass("active").removeClass("inactive"); $(".overlay-id"+$(this).data("id")).prev().addClass("inactive") }); /* $('.slideshow').children().on('mouseleave',function(e) { $(this).removeClass("active"); }); */ $('.carousel').carousel(); }); })(jQuery);

Related: See More


Questions / Comments: