"Slider "
Bootstrap 3.0.0 Snippet by saidsaoudi

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 lang="en"> <head> <meta charset="utf-8"> <link rel="icon" type="image/png" href="img/favicon.png"> <title>like</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <style> *{margin:0;padding: 0 } ul{ list-style: none; } .content-slider { background-color: #eee; } .pd0{ padding:0; } .content-p{ font-size: 49px; padding: 100px 80px 0 0px; font-family: 'clanpro', Helvetica, sans-serif ; } .myshadow{ color: #ff0066; font-size: 40px; margin-top: 0px; margin-bottom:30px; font-family: 'clanpro', Helvetica, sans-serif ; } #carousel-text{ padding: 0; } .sub-text{ width: 74%; font-size: 18px; } .newslleter{ padding-top: 27px; font-size: 20px; } .nav-transparent{ background-color:transparent; border: transparent; } .navbar-search{ padding:0; } .btn-info { color: #fff; background-color: #ff0066; border-color: #ff0066; } .btn-info:hover,.btn-info:focus,.btn-info:active { background-color: #ff0066; border-color: #ff0066; } .fg{ height: 62px !important; } </style> </head> <body> <div class="content-slider"> <div class="container-fluid"> <div id="main_area"> <!-- Slider --> <div class="row"> <div class="col-sm-12 main_area_mg0" id="slider"> <!-- Top part of the slider --> <div class="row"> <div class="col-lg-6"> <p class="content-p col-lg-offset-2">C'est Like Resto,</p> <div class="col-sm-12" id="carousel-text"></div> <div id="slide-content" > <div style="clear:both"></div> <p class="sub-text col-lg-offset-2">Faites-vous livrer les repas de votre choix par vos restaurants préférés à Paris en quelques clics.</p> <p class="newslleter col-lg-offset-2">SAISISSEZ VOTRE ADRESSE</p> <nav class="navbar navbar-default nav-transparent col-lg-offset-2"> <div class="nav nav-justified navbar-nav"> <form class="navbar-form navbar-search" role="search"> <div class="input-group input-email input-group-lg""> <input type="text" class="form-control fg" placeholder="Adresse Email"> <div class="input-group-btn"> <button type="button" class="btn btn-search btn-info fg"> <span class="label-icon">Voir les restaurants</span> </button> </div> </div> </form> </div> </nav> <div style="display: none;"> <div id="slide-content-0"> <h2 class="myshadow col-lg-offset-2">Slider One</h2> </div> <div id="slide-content-1"> <h2 class="myshadow col-lg-offset-2">Slider Two</h2> </div> <div id="slide-content-2"> <h2 class="myshadow col-lg-offset-2">Slider Three</h2> </div> <div id="slide-content-3"> <h2 class="myshadow col-lg-offset-2">Slider Four</h2> </div> <div id="slide-content-4"> <h2 class="myshadow col-lg-offset-2">Slider Five</h2> </div> <div id="slide-content-5"> <h2 class="myshadow col-lg-offset-2">Slider Six</h2> </div> </div> </div> </div> <div class="col-lg-6 pd0"> <div class="col-sm-12" id="carousel-bounding-box"> <div class="carousel slide" id="myCarousel" data-ride="carousel"> <!-- Carousel items --> <div class="carousel-inner bordered"> <div class="item active" data-slide-number="0"> <img src="https://duyt4h9nfnj50.cloudfront.net/resized/804529997dfeb1436b5c437bfc2a6ef0-w640-eb.jpg" class="img-responsive img-left"></div> <div class="item" data-slide-number="1"> <img src="https://duyt4h9nfnj50.cloudfront.net/resized/aeb5d37acddea2f7d5d580fc9a76936e-w640-b1.jpg" class="img-responsive img-left"></div> <div class="item" data-slide-number="2"> <img src="https://duyt4h9nfnj50.cloudfront.net/resized/7ed4a92b4d7eefd068db3be86b3f810b-w640-9f.jpg" class="img-responsive img-left"></div> <div class="item" data-slide-number="3"> <img src="https://duyt4h9nfnj50.cloudfront.net/resized/804529997dfeb1436b5c437bfc2a6ef0-w640-eb.jpg" class="img-responsive img-left"></div> <div class="item" data-slide-number="4"> <img src="https://duyt4h9nfnj50.cloudfront.net/resized/103eb2beb22266bb8d80d0e5a50a11c9-w640-3a.jpg" class="img-responsive img-left"></div> <div class="item" data-slide-number="5"> <img src="https://duyt4h9nfnj50.cloudfront.net/resized/22efeb0de86c392fdd3af92607bdbb54-w640-42.jpg" class="img-responsive img-left"></div> </div><!-- Carousel nav --> </div> </div> </div> </div> </div> </div><!--/Slider--> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script> jQuery(document).ready(function($) { $('#myCarousel').carousel({ interval: 5000 }); $('#carousel-text').html($('#slide-content-0').html()); // When the carousel slides, auto update the text $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); }); </script> </body> </html>

Questions / Comments: