我已将旋转木马滑块添加到我的网站http://www.joekonst.com。
除了我在iPhone上查看它外，它看起来还不错。当幻灯片过渡时，当幻灯片改变时，左侧的白色闪烁。
有趣的是，当我将浏览器大小视为可能的最小尺寸时，它看起来很好，但是当我在移动设备上实际查看它时，它看起来是错误的！
有什么想法吗？
谢谢乔：）
<!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>
答案 0 :(得分：0)
只需检查，尝试为您的＆＃34; myCarousel＆＃34;添加背景颜色。 div（例如红色）。在进行转换时，您看到一条红线吗？
答案 1 :(得分：0)
<!--To run this file you need to include normal bootstarp file i.e. css and js only--->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="" >
<title>Responsive Slider Product</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!--<link rel="shortcut icon" href="images/ico/favicon.ico">-->
</head><!--/head-->
<style>
.demo_chckbox li
{
float:left;
width:22%;
list-style: none;
}
.demo_chckbox
{
margin-bottom: 50px;
}
.append_demo
{
width:50%;
margin: 0px auto;
height: 350px;
}
.append_demo .col-xs-4
{
width:100%;
}
.append_demo
{
display: none;
}
.btn-group
{
margin-bottom: 10px;
}
.reder
{
color: #FF0505;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.append_demo
{
display: block;
width: 100%;
}
.mobi-hide
{
display: none;
}
.append_demo > .btn
{
margin-bottom: 10px;
}
.append_demo .col-xs-4
{
padding: 0px;
}
.ads-list
{
margin-top: 50px;
}
}
</style>
<body>
<section id="stories">
<div class="container">
<h2>Convert Prodcut Slider Into Mobile View</h2>
<p>Go to Responsive view and check slider (Press F12 and go to Responsive Design Modal and Check)</p>
<p class="reder"><strong>Note:</strong>Please refresh page when you are in mobile view.</p>
<div class="row">
<div class="col-md-9 stories-list">
<h2>Popular Product</h2>
<div class="btn-group mobi-hide">
<a class="btn btn-danger" href="#scroller" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="btn btn-danger" href="#scroller" data-slide="next"><i class="icon-angle-right"></i></a>
</div>
<div class="clear-fix"></div>
<div id="scroller" class="carousel slide">
<div class="carousel-inner slider_demo">
<div class="item active">
<div class="row">
<div class="col-xs-4">
<div class="portfolio-item">
<div class="item-inner">
<h4>Slide-1</h4>
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="portfolio-item">
<div class="item-inner">
<h4>Slide-2</h4>
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="portfolio-item">
<div class="item-inner">
<h4>Slide-3</h4>
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.item-->
<div class="item">
<div class="row">
<div class="col-xs-4">
<div class="portfolio-item">
<div class="item-inner">
<h4>Slide-4</h4>
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="portfolio-item">
<div class="item-inner">
<h4>Slide-5</h4>
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="portfolio-item">
<div class="item-inner">
<h4>Slide-6</h4>
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div>
</div>
<!--append div use for mobile view it is see on the mobile view only-->
<div class="append_demo" >
<a class="btn btn-danger" href="#scroller_mobi" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="btn btn-danger" href="#scroller_mobi" data-slide="next"><i class="icon-angle-right"></i></a>
<div id="scroller_mobi" class="carousel slide">
<div class="carousel-inner">
</div>
</div>
</div>
<!-- end append div use for mobile view it is see on the mobile view only-->
<div class="clear-fix"></div>
</div>
<div class="col-md-3 ads-list">
<div class="col-md-12">
<div class="clearfix"></div>
<div class="evnet-s">
<h3>Mobile View Slider</h3>
<div class="btn-group">
<a class="btn btn-danger" href="#scroller2" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="btn btn-danger" href="#scroller2" data-slide="next"><i class="icon-angle-right"></i></a>
</div>
<div id="scroller2" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="">
<div class="portfolio-item">
<div class="item-inner">
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item ">
<div class="">
<div class="portfolio-item">
<div class="item-inner">
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item ">
<div class="">
<div class="portfolio-item">
<div class="item-inner">
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item ">
<div class="">
<div class="portfolio-item">
<div class="item-inner">
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="">
<div class="portfolio-item">
<div class="item-inner">
<img class="img-responsive" src="shop-placeholder.png" alt="">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of </p>
</div>
</div>
</div>
</div><!--/.item-->
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div>
</section><!--/#recent-works-->
<!-- forget end-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var widnowWidth = $(window).width();
//alert(widnowWidth);
if (widnowWidth <=768){
/* convert product slider into mobile slider */
$(".slider_demo .col-xs-4").appendTo(".append_demo .carousel-inner");
$(".append_demo .col-xs-4").addClass("item");
$(".append_demo .col-xs-4:first-child").addClass("active");
}
</script>
</body>
</html>
答案 2 :(得分：0)
删除“ navbar-inverse”类。它将像魅力一样工作;）