Flexslider全屏不居中移動

Question

我有這個全屏幕背景，我正在使用它，它可以在我的筆記本電腦和大屏幕上正常工作。問題是當我從移動設備進入網站時。背景圖像（及其上方的按鈕）移到側面。我不知道這是爲什麼。我認爲它必須與bootstrap.min。

的HTML：

<!-- Intro Section --> 
    <section id="intro"> 
     <!-- Hero Slider Section --> 
     <div class="flexslider fullscreen-carousel hero-slider-1 "> 
      <ul class="slides"> 

       <!--Slide--> 
       <li data-slide="dark-slide"> 
        <div class="slide-bg-image overlay-light dark-bg parallax" data-background-img="images/connexion_background.jpg"> 
         <div class="js-Slide-fullscreen-height container"> 
          <div class="intro-content"> 
           <div class="intro-content-inner"> 
            <br /> 
            <div><a class="btn btn-md btn-white" href="contact.php">Request a Quote</a><span class="btn-space-10"></span><a class="btn btn-md btn-white " href="research-solutions.html">View Our Solutions</a></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </li> 


      </ul> 
     </div> 
     <!-- End Hero Slider Section --> 
    </section> 
    <div class="clearfix"></div> 
    <!-- End Intro Section --> 

的JS：

var pageSection = $('.slide-bg-image, .bg-image'); 
pageSection.each(function (indx) { 

    if ($(this).attr("data-background-img")) { 
     $(this).css("background-image", "url(" + $(this).data("background-img") + ")"); 
    } 
}); 

function fullScreenSlider() { 
    if ($('.fullscreen-carousel').length > 0) { 

     $('.fullscreen-carousel').flexslider({ 
      animation: "slide", 
      // startAt: 0, 
      animationSpeed: 700, 
      animationLoop: true, 
      slideshow: true, 
      easing: "swing", 
      controlNav: false, 
      before: function (slider) { 
       //Slide Caption Animate 
       $('.fullscreen-carousel .intro-content-inner').fadeOut().animate({ top: '80px' }, { queue: false, easing: 'easeOutQuad', duration: 700 }); 
       slider.slides.eq(slider.currentSlide).delay(400); 
       slider.slides.eq(slider.animatingTo).delay(400); 

      }, 
      after: function (slider) { 
       //Slide Caption Animate 
       $('.fullscreen-carousel .flex-active-slide').find('.intro-content-inner').fadeIn(2000).animate({ top: '0' }, { queue: false, easing: 'easeOutQuad', duration: 1200 }); 

       // Header Dark Light 
       headerDarkLight_with_flexslider(); 

      }, 
      start: function (slider) { 
       $('body').removeClass('loading'); 

       // Header Dark Light 
       headerDarkLight_with_flexslider(); 

      }, 
      useCSS: true, 
     }); 
    }; 

    // Header Dark Light 
    function headerDarkLight_with_flexslider() { 

     var color = $('.fullscreen-carousel').find('li.flex-active-slide').attr('data-slide'); 
     if (color == 'dark-slide') { 
      $('#header').addClass('header').removeClass('header-light'); 
      $('#header').removeClass('header-default'); 
     } 
     if (color == 'light-slide') { 
      $('#header').addClass('header-light').removeClass('header-dark'); 
      $('#header').removeClass('header-default'); 
     } 
     if (color == 'default-slide') { 
      $('#header').removeClass('header-dark'); 
      $('#header').removeClass('header-light'); 
      $('#header').addClass('header'); 
     } 
    }; 

    // "fullscreen-carousel" height 
    fullScreenCarousel(); 
    function fullScreenCarousel() { 
     var windowWidth = $(window).width(); 
     var windowHeight = $(window).height(); 

     if ($(window).width() > 767) { 
      $('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", windowHeight); 
     } 
     else { 
      $('.hero-slider-1 .slides .js-Slide-fullscreen-height').css("height", '400px'); 
     } 

    }; 
    $(window).resize(function() { 
     fullScreenCarousel(); 
    }); 


}; 

這是結果在移動：

的按鈕和背景圖像被移動到右側。它們不居中，背景圖片重複。

我可以看到這個在Mozilla的開發工具：

任何幫助，將不勝感激。

謝謝。

Answer 1

中心幻燈片中的圖像添加這在你的CSS

.flexslider img { margin: 0 auto; } 

OR

.flexslider .slides > li{ 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center; 

}

Answer 2

可以嘗試在最後的css文件的添加下面的CSS

.flexslider ul.slides { 
padding: 0 !important; 
} 

Answer 3

你的Flex滑塊向左位置不對，你可以簡單地用left物業解決這個問題，用下面的代碼

.fullscreen-carousel .slides li { 
    height: 100%; 
    left: -40px; /* newly added */ 
    overflow: hidden; 
    position: relative; 
} 

嘗試，你可以試試這個也刪除left:-40px和將此jquery添加到頁面

$(window).load(function() { 
    $('.flexslider').flexslider(); 
    $(window).trigger('resize'); 
});