Bootstrap Carousel Slider Doesn't Transition How I Want In Mobile View -
i've added carousel slider website http://www.joekonst.com.
it looks fine apart when view on iphone. when slide transitions on kind of flashes white on left hand side when slides change.
the funny thing when view browser size smallest size possible looks fine, when view on mobile device looks wrong!
any ideas?
thanks joe :)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>tech enthusiast!</title> <link href="joekonst/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="joekonst/mystyles/css/mystyles.css" rel="stylesheet" media="screen"> <link rel="stylesheet" href="joekonst/mystyles/css/animate.css" media="screen"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="index.html">home</a></li> <li><a href="joekonst/blog/blog.html">blog</a></li> <li><a href="joekonst/archives/archives.html">archives</a></li> <li><a href="contact.php">contact</a></li> </ul> </div> </div> </div> <div id="mycarousel" class="carousel slide" data-interval="5000"> <ol class="carousel-indicators"> <li class="active" data-target="#mycarousel" data-slide-to="0"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="joekonst/images/coding1.png" class="img-responsive" width="100%"> </div> <div class="item"> <img src="joekonst/images/coding1.png" class="img-responsive" width="100%"> </div> <div class="item"> <img src="joekonst/images/coding1.png" class="img-responsive" width="100%"> </div> </div> </div> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <br> <div class="container"> <div class="row"> <div class="col-sm-12"> <h2>a tech n00bs guide self development</h2> <p>welcome!</p> <p>my name's joe consterdine , i'm on journey trying improve myself in areas i'm passionate about.</p> <p>the purpose of site inspire other people in own self-development journey.</p> <p>i no expert, guy wanting learn on daily basis , spend time doing things enjoy. after all, isn't lifes about?!</p> <p>everything write in blog based purely on own experiences. hope provides value , helps on own journey :)</p> </div> </div> <hr> <div class="row"> <div class="col-sm-12"> <h2>web design</h2> <p>i started learning web design in june 2014. i'd been interested in web related ventures , after talking friend , fellow designer decided try out.</p> <p>i instantly took liking coding , excited see of sites other designers had produced.</p> <p>at particular time i'd been trying out internet marketing activities such affiliate marketing , list building.</p> <p>i'd been learning , testing out local seo , making whiteboard animation videos @ <a href="http://www.fiverr.com">fiverr.</a></p> <p>in end decided if going reach high level in of these activities i'd have put lot of hours in.</p> <p>i decided stick learning web design , commit mastering , turns out that's been decision :)</p> <p>fast forward 8/9 months on , have skills in html, css, javascript, jquery, bootstrap , responsive design.</p> <p>if want know how i've learned have date in such small time period check out <a href="joekonst/blog/blog.html">blog</a> covers in more detail.</p> </div> </div> <hr> <div class="row"> <div class="col-sm-12"> <h3>self development</h3> <p>this sites about!</p> <p>as touched on before, i'm no means expert journey go on can grow in own.</p> <p>you might not enjoy tech related projects me, may share common feeling , need improve yourself.</p> <p>if that's case i'm glad share journey , hope provides push need if you're struggling, or reminder you're working towards worthwhile :)</p> <p>i hope enjoy visit on site , taking time check out road glory!</p> <p><p>here's link <a href="joekonst/blog/blog.html">blog.</a></p> <p>i'm updating content regularly keep checking out updates!</p> </div> </div> <hr> <p class="footer">joe consterdine 2015©</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="joekonst/js/bootstrap.min.js"></script> <script src="joekonst/mystyles/js/js.js"></script> <script src="joekonst/mystyles/js/wow.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.carousel').carousel(); }); </script> </body> </html>
just check, try add background color "mycarousel" div (red color example). when doing transition, see red line?
Comments
Post a Comment