2016-02-01 65 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