您好我使用bxslider插件并用于最小和最大幻灯片
但我的问题是我的滑块总是shwo到最后一张幻灯片隐藏了一些部分如何解决它。我已经尝试了一段时间但没有找到任何解决方案我的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>TIL </title>
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="">
<meta name="Copyright" content="Copyright 2015. All Rights Reserved.">
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Bootstrap Core CSS -->
<link href="http://www.buylic.in/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="http://www.buylic.in/css/modern-business.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="http://www.buylic.in/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Contact form -->
<link rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="http://www.buylic.in/css/jquery.bxslider.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="home">
<!-- Navigation -->
<div class="">Profolio</div>
<!-- Header End here -->
<!-- Body Start here -->
<!-- Header Carousel -->
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-9">
<div class="row">
asdf asd fasd fasd fasd fasd
</div>
</div>
<div class="col-md-3">
============= ------------
</div>
</div>
<!-- /.row -->
<hr>
<!-- Testimonial Section -->
<h2>Testimonials</h2>
<div class="well">
<ul class="bxslider">
<li>
<div class="testimonil">
<h5>Rakesh Kumar</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Vijay Kumar2</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Rohit Kumar3</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Suresh Kumar11</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Ravi Kumar22</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Rakesh Kumar33</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
</ul>
</div> </div>
<!-- /.container -->
<!-- =========================================================================== -->
<!-- =========================================================================== -->
<!-- Footer here -->
<!-- Footer here -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr />
<ul class="footerLinking">
<li><a href="index.html">Home</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
Rohit azad
</div>
</div>
</div>
</footer>
<!-- Footer here end -->
<!-- jQuery -->
<script src="http://www.buylic.in/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="http://www.buylic.in/js/bootstrap.min.js"></script>
<script src="http://www.buylic.in/js/jquery.bxslider.min.js"></script>
<!-- Contact form -->
<script >
$(document).ready(function(){
$('.bxslider').bxSlider({
controls: false,
minSlides: 1,
maxSlides: 3,
slideWidth: 300,
slideMargin: 10
});
});
</script>
<script ></script>
</body>
</html>
答案 0 :(得分：0)
把它放在你的CSS中
.bx-wrapper {
max-width: 930px!important;
}
答案 1 :(得分：0)
那是因为由BXslider插件生成的ul.bxslider周围的两个包装div在css中有每个设置的5px边框，这些边框是从滑块的整体计算视口中减去的 - 这是在你的case 920px（3x300px + 2x10px页边距），导致无法完全看到最后一张图像。如果取消设置这些边框，滑块将完全适合（在大屏幕上）
<强> demo 1
或者，您可以将这些div的框大小更改为“content-box”，以使边框不包含在总宽度中。
.bx-wrapper, .bx-viewport {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.bx-viewport{
box-shadow:none !important;
}
<强> Demo 2