Flexslider全屏不是移动中心

时间:2017-05-09 06:37:09

标签: javascript jquery html slider background-image

我有这个全屏幕背景,我正在使用它,它可以在我的笔记本电脑和大屏幕上正常工作。问题是当我从移动设备进入网站时。背景图像(及其上方的按钮)移动到侧面。我不知道为什么会这样。我认为必须使用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();
    });


};

这是移动广告中的结果:enter image description here

按钮和背景图像向右移动。它们没有居中,背景图片重复出现。

我可以在Mozilla的开发工具上看到这个:

enter image description here

任何帮助都将不胜感激。

谢谢。

3 个答案:

答案 0 :(得分:1)

将幻灯片中的图片居中添加到您的css中

.flexslider img { margin: 0 auto; }

OR

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

}

答案 1 :(得分:1)

您可以尝试在css文档的最后添加以下css

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

enter image description here

答案 2 :(得分:0)

您的弹性滑块左侧位置不正确,您只需使用left属性修复此问题,请尝试使用以下代码

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

image here

你也可以尝试这个,删除left:-40px并将此jquery添加到页面

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