Flexslider Vollbild ist nicht zentriert in mobilen

Question

Ich habe diesen Fullscreen-Hintergrund, den ich benutze und es funktioniert richtig auf meinem Laptop und großen Bildschirmen. Das Problem ist, wenn ich die Website von einem mobilen Gerät aus betrete. Das Hintergrundbild (und die Schaltflächen darüber) werden zur Seite verschoben. Ich weiß nicht, warum das so ist. Ich denke es muss mit dem bootstrap.min sein.

Die 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 --> 

Die 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(); 
    }); 


}; 

Dies ist das Ergebnis in der Mobil:

Die Tasten und das Hintergrundbild nach rechts bewegt. Sie sind nicht zentriert und das Hintergrundbild wiederholt sich.

Das kann ich sehen, auf dem Entwicklungs-Tool von Mozilla:

Jede Hilfe würde geschätzt.

Vielen Dank.

Answer 1

Zentrum der Bilder in Ihren Folien hinzufügen dies in Ihrem css

.flexslider img { margin: 0 auto; } 

ODER

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

}

Answer 2

können Sie versuchen, endlich von dem CSS-Dokument folgende CSS hinzufügen

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

Answer 3

Ihr Flexschieberegler nach links Position nicht richtig ist, können Sie einfach beheben diese mit left Eigenschaft, versuchen Sie mit dem unten stehenden Code

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

können Sie dies auch versuchen, entfernen Sie die left:-40px und fügen Sie diese jquery der Seite hinzu

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