"Useful carousel and navigation "
Bootstrap 3.3.0 Snippet by oyilmaz

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width" /> <script src="https://use.fontawesome.com/4170a39cd3.js"></script> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="~/Content/myCss.css" rel="stylesheet" /> <body> <div class="main-wrapper"> <header class="main-header"> <div class="row"> <!--Logo--> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> My Logo Here </div> <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <nav class="main-nav"> <ul> <li><a href="#">Bilgisayarlar</a></li> <li><a href="#">Telefonlar</a></li> <li><a href="#">Tabletler</a></li> <li><a href="#">İletişim</a></li> <li><a href="#">Hakkımızda</a></li> </ul> </nav> </div> <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1"> <div class="shopping-cart"> <i class="fa fa-shopping-cart"></i> <span class="item-count">5</span> </div> </div> </div> </header> <div class="carousel slide" data-ride="carousel" id="main-carousel"> <!-- Indicators --> <ol class="carousel-indicators" > <li data-target="#main-carousel" data-slide-to="0" class="active"></li> <li data-target="#main-carousel" data-slide-to="1"></li> <li data-target="#main-carousel" data-slide-to="2"></li> </ol> <!-- Slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/1920x500" /> </div> <div class="item"> <img src="http://placehold.it/1920x500" /> </div> <div class="item"> <img src="http://placehold.it/1920x500" /> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#main-carousel" role="button" data-slide="prev"> <span class="fa fa-arrow-left"></span> </a> <a class="right carousel-control" href="#main-carousel" role="button" data-slide="next"> <span class="fa fa-arrow-right"></span> </a> </div> </div> </body> </html>
.main-header { padding:15px 0; border-bottom: 1px solid #eee; } .main-header .main-nav { } .main-header .main-nav ul{ list-style-type:none; padding:0; margin:0; } .main-header .main-nav ul:after{ clear:both; content: ' '; overflow:hidden; display:block; } .main-header .main-nav ul li{ float:left; } .main-header .main-nav ul li a{ display:block; padding:0; margin:0 15px; color:#52575d; font-weight:bold; font-family: 'Muli' ,sans-serif; text-decoration:none; font-size:14px; } .main-header .main-nav ul li a:hover { color:#f72464; } .main-header .shopping-cart{ position:relative; display:inline-block; clear:both; } .main-header .shopping-cart i{ font-size:22px; color:#808080; } .main-header .shopping-cart .item-count{ position:absolute; right: -10px; bottom: -10px; background-color:#f72464; color:#fff; font-family: 'Muli' ,sans-serif; font-size:11px; border-radius :100%; padding:3px 7px; } /*Bootstrap Carousel Control Overrides*/ .carousel-control span { position:absolute; top:45%; left: 20px; font-size: 40px; } .carousel-control.right span { right:20px; }

Related: See More

Rubik Presentation Page
Cool Navigation Bar
Bootstrap4 navigation border animation
arrow key navigation thumbnail gallery modal view

Questions / Comments: