Question posted in 
I’ve added a carousel slider to my website http://www.joekonst.com.
It looks fine apart from when I view it on my IPhone. When the slide transitions over it kind of flashes white on the left hand side when the slides change.
The funny thing is when I view my browser size to the smallest size possible it looks fine, but when I actually view it on my mobile device it 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 To Self Development</h2>
<p>Welcome!</p>
<p>My name's Joe Consterdine and I'm currently on a journey trying to improve myself in areas I'm passionate about.</p>
<p>The purpose of this site to hopefully inspire other people in their own self-development journey.</p>
<p>I am no expert, just a guy wanting to learn on a daily basis and spend my time doing things I enjoy. After all, isn't that what lifes about?!</p>
<p>Everything I write in my blog will be based purely on my own experiences. I hope that provides you with some value and helps you on your 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 always been interested in web related ventures and after talking with a
friend and fellow designer decided to try it out.</p>
<p>I instantly took a liking to coding and was excited to see some of the sites other designers had produced.</p>
<p>At that particular time I'd been trying out some Internet Marketing activities such as affiliate marketing and list building.</p>
<p>I'd also been learning and testing out local SEO and making whiteboard animation videos at <a href="http://www.Fiverr.com">Fiverr.</a></p>
<p>In the end I decided if I was going to reach a high level in any of these activities I'd have to put a lot of hours in.</p>
<p>I decided to simply stick to learning Web Design and commit fully to mastering it and as it turns out that's been a good decision :)</p>
<p>Fast forward 8/9 months on and I have skills in HTML, CSS, Javascript, JQuery, Bootstrap and Responsive Design.</p>
<p>If you want to know how I've learned everything I have to date in a such a small time period then check out my <a href="JoeKonst/blog/blog.html">Blog</a> which
covers it in more detail.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-12">
<h3>Self Development</h3>
<p>This is what the sites all about!</p>
<p>As I touched on before, I'm by no means an expert but hopefully the journey I go on can help you grow in your own.</p>
<p>You might not necessarily enjoy tech related projects like me, but may share the common feeling and need to improve yourself.</p>
<p>If that's the case I'm glad to share my journey with you and hope it provides you with the push you need if you're struggling, or
a reminder that what you're working towards is worthwhile :)</p>
<p>I hope you enjoy your visit on the site and thanks for taking the time to check out my road to glory!</p>
<p><p>Here's the link to my <a href="JoeKonst/blog/blog.html">Blog.</a></p>
<p>I'm updating my content regularly so keep checking it out for 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>
3
Answers
Just to check, try to add a background color to your “myCarousel” div (red color for example). When doing the transition, do you see a red line?
Remove “navbar-inverse” class. It will work like a charm 😉