jquery - Bootstrap Carousel clashes with Bootstrap 4 Beta -
again.
i'm trying implement bootstrap's carousel webpage. i'm running in issues, however.
the images of carousel show stacked on top of each other. navigation buttons don't show up. bootstrap's css v4.0.0 beta.
if change bootstrap css file version 3.7, carousel works, other stuff depending on bootstrap 4 of course stop working.
is mistake i'm looking over, or bug in bootstrap 4beta?
here html code.
/*custom irie vibes colors.*/ .bg-irie-yellow { background-color: #e7dd96; } .bg-irie-grey { background-color: #41403e; } .bg-irie-red{ background-color: #cf7654; } .text-white { color: white; } /*only applies classes irie-green when navbar-brand used*/ .navbar-brand.irie-green{ color: #edce4f; font-weight: bolder; text-shadow: 9ba573 1 1 20px; } /*makes navbar little thinner default (overwrite)*/ .navbar-nav > li > { padding-top:5px !important; padding-bottom:5px !important; } .navbar { min-height:32px !important; } /*a fix bootstrap's broken img-responsive*/ .img-responsive { max-width:100%; padding: 10px; } /*leave space between content , navbar*/ .container.content{ padding-top: 45px; } /*styling language buttons on right*/ .nav-link.language { font-style: oblique; letter-spacing: 0.5px; } /*change color of dropdown menu's*/ .navbar-nav > li > .dropdown-menu { background-color: #cf7654; padding-left: 20px; border: 0px; } .nav-link{ padding: .2rem 1rem; }<html> <head> <!-- setting things work correctly. --> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="/src/img/favicon.png" /> <!-- custom style sheet --> <!-- bootstrap style sheet --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/y6pd6fv/vv2hjna6t+vslu6fwyxjcftcephbnj0lyafsxtsjbbfadjzaleqsn6m" crossorigin="anonymous"> <!-- load overwrite style sheet last enable overwriting bootstrap features --> <link rel="stylesheet" href="/src/css/main.css"> <title>irie vibes roots festival - home</title> </head> <body class="bg-irie-yellow"> <header> <!-- header contains displays or above nav-bar --> <!--header image--> <div class="bg-irie-grey text-center"> <img class="img-responsive" src="http://i.imgur.com/buu5ppo.png"> </div> <!--navigation--> <nav class="navbar navbar-expand-lg navbar-dark bg-irie-red"> <div class="container"> <!-- allows navbar become smaller on smaller mobile device. --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbartext" aria-controls="navbartext" aria-expanded="false" aria-label="toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"></a> <a id="irie-green" class="navbar-brand irie-green" href="#">3rd week of july</a> <div class="collapse navbar-collapse" id="navbartext"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">tickets</a> </li> <li class="nav-item"> <a class="nav-link" href="#">programme</a> </li> <li class="nav-item"> <a class="nav-link" href="#">irie vibes kids</a> </li> <li class="nav-item dropdown"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">info<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="nav-link drop-2" href="#">green forward</a></li> <li><a class="nav-link drop-2" href="#">volunteers</a></li> <li><a class="nav-link drop-2" href="#">motivation</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#">partners</a> </li> </ul> <span class="navbar-text"> <!-- language selector. --> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link language text-white" href="#">nederlands</a> </li> <li class="nav-item active"> <a class="nav-link language text-white" href="#">english <span class="sr-only">(current)</span></a> </li> </ul> </span> </div> </div> </nav> </header> <!-- main container encapsulates evberything. --> <div id="content" class="container content"> <!-- row containing carousel , news --> <div class="row"> <div class="col-sm-3"></div> <div class="col-xs-6"> <!-- carousel --> <div id="slideshow" class="carousel slide" data-ride="carousel"> <!-- indicator dot navigation --> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="rounded" src="/src/img/slideshow/slide1.png" alt="slide1"/> <div class="carousel-caption "> <p>slider 1</p> </div> </div> <div class="item"> <img class="rounded" src="/src/img/slideshow/slide2.png" alt="slide2"/> <div class="carousel-caption "> <p>slider 2</p> </div> </div> <!-- navigation control buttons --> <a class="left carousel-control" href="#slideshow" role="button" data-slide="prev"> <span class="flyphicon flyphicon-shevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#slideshow" role="button" data-slide="next"> <span class="flyphicon flyphicon-shevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> </div> </div> <div class="col-sm-3"></div> </div> </div> </body> <!--loading bootstrap scripts @ end of page prevent slowdowns--> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/u6ypibehpof/4+1nzfpr53nxss+glckfwbdfntxtclqqenisfwazpkamnfnmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0abixch4zdo7tp9hkz4tshbi047nrkglo3sejag45jxxngifyzk4si90rdiqnm1" crossorigin="anonymous"></script> </html>thanks in advance!
one love, anna
Comments
Post a Comment