javascript - 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; }

或

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