2016-02-01 150 views
0

嗨我使用bxslider插件,并用于最小和最大滑动bx滑块滑块上次滑动总是隐藏一些部分?

但我的问题是我的滑块总是shwo到上一张幻灯片的一部分隐藏如何解决它。我有尝试一些时间,但没有找到任何解决我的代码是

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
 
\t <title>TIL </title> 
 
\t 
 
\t \t <!-- Google will often use this as its description of your page/site. Make it good. --> 
 

 
\t  <meta name="google-site-verification" content=""> 
 
\t  <!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters --> 
 

 
\t  <meta name="author" content=""> 
 
\t  <meta name="Copyright" content="Copyright 2015. All Rights Reserved."> 
 

 
\t  <meta name="DC.title" content="Project Name"> 
 
\t  <meta name="DC.subject" content="What you're about."> 
 
\t  <meta name="DC.creator" content="Who made this site."> 
 
\t  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
 
\t  
 

 
\t \t <!-- 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]--> 
 
\t 
 
\t 
 
</head> 
 
<body id="home"> 
 
\t <!-- 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"> 
 
\t <ul class="bxslider"> 
 
\t <li> 
 
\t \t <div class="testimonil"> 
 
\t \t \t <h5>Rakesh Kumar</h5> 
 
\t \t \t <blockquote class="quotes"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t 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. 
 
\t \t \t \t </p> 
 
\t \t \t </blockquote> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t <div class="testimonil"> 
 
\t \t \t <h5>Vijay Kumar2</h5> 
 
\t \t \t <blockquote class="quotes"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t 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. 
 
\t \t \t \t </p> 
 
\t \t \t </blockquote> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t <div class="testimonil"> 
 
\t \t \t <h5>Rohit Kumar3</h5> 
 
\t \t \t <blockquote class="quotes"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t 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. 
 
\t \t \t \t </p> 
 
\t \t \t </blockquote> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t <div class="testimonil"> 
 
\t \t \t <h5>Suresh Kumar11</h5> 
 
\t \t \t <blockquote class="quotes"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t 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. 
 
\t \t \t \t </p> 
 
\t \t \t </blockquote> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t <div class="testimonil"> 
 
\t \t \t <h5>Ravi Kumar22</h5> 
 
\t \t \t <blockquote class="quotes"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t 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. 
 
\t \t \t \t </p> 
 
\t \t \t </blockquote> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t <div class="testimonil"> 
 
\t \t \t <h5>Rakesh Kumar33</h5> 
 
\t \t \t <blockquote class="quotes"> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t 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. 
 
\t \t \t \t </p> 
 
\t \t \t </blockquote> 
 
\t \t </div> 
 
\t </li> 
 
\t </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> \t \t

+0

你必须定义的宽度为300像素见证一个项目的宽度。但我期望容器宽度是1170px,因为你使用的是Bootstrap。所以,容器宽度和项目宽度不等于显示所有的推荐内容。这就是你的问题发生的原因。根据容器宽度定义项目宽度。那么你可以解决这个问题。 – user2584538

回答

0

只是把这个在你的CSS

 .bx-wrapper { 
     max-width: 930px!important; 
      } 
0

这是因为各地ul.bxslider两种包装的div ,由BXslider插件生成,在它们周围有5px边框,每个在CSS中设置,这些边框将从滑块的整个计算视口中减去 - 这在您的情况下为920px(3x300px + 2x10px页边距),导致最后一张图片不被完全看到。如果取消设置这些边界,您的滑块会调整得非常完美(大屏幕上)

demo 1

或者,你可以为了改变这些div到“内容箱”的箱子,尺寸有边框不包含在总宽度中。

.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