Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Background image transitions / slideshow #2898

Closed
ninefootone opened this issue Dec 6, 2017 · 44 comments

Comments

@ninefootone
Copy link

commented Dec 6, 2017

I'd love the means to have essentially a slideshow as the background to a column/section in the same way you can currently have a static image or video. I know you can do a sliders but I'm really after the more complex layout you get with a full section (buttons, text, other images) but with a series of background images transitioning.

@bainternet

This comment has been minimized.

Copy link
Collaborator

commented Dec 6, 2017

@ninefootone

Thanks for your suggestion,

Can you link examples?

@ninefootone

This comment has been minimized.

Copy link
Author

commented Dec 6, 2017

@bainternet

This comment has been minimized.

Copy link
Collaborator

commented Dec 10, 2017

@ninefootone

Thanks for the suggestion, we will have a look at it in the future.

@nelsonguda

This comment has been minimized.

Copy link

commented Feb 3, 2018

I would like to use Elementor and I agree that a background slide show is a great feature. Both Visual Composer and Beaver Builder have that as an option for sections. It is much more efficient than using a video background.

Thank you!

@BossOz

This comment has been minimized.

Copy link

commented Jun 21, 2018

I agree to!
Maybe with a Ken Burns effect as well

@nivniv44

This comment has been minimized.

Copy link

commented Jul 1, 2018

A creator with CodeCanyon is offering just that for $15 - I think it should be already supported by Elementor.
https://codecanyon.net/item/elementor-background-image-video-slider/21598997

@ninefootone

This comment has been minimized.

Copy link
Author

commented Jul 2, 2018

Thanks, that's helpful – agree it should be built into Elementor!

@silvioghedin

This comment has been minimized.

Copy link

commented Aug 8, 2018

still waiting ;)

@oshibobo

This comment has been minimized.

Copy link

commented Aug 8, 2018

+1

@bentalgad

This comment has been minimized.

Copy link

commented Aug 10, 2018

+1 Lovely idea!

@bentalgad

This comment has been minimized.

Copy link

commented Aug 27, 2018

Still Waiting.

Another example link.

@dasignlady

This comment has been minimized.

Copy link

commented Sep 6, 2018

Pleeeeeze? I use Anywhere Elementor Pro for this one feature. Would be nice to have fewer plugins. Here is a (for instance) Screenshot of an Elementor section with AE Pro background slider, a headline in one column and social share buttons in another. Like previous poster mentioned, it is handier than background video, and the creative possibilities are more robust. Thanks in Advance!

anywhere-elementor-background-slider

@bentalgad

This comment has been minimized.

Copy link

commented Sep 6, 2018

I also use anywhere Elementor for this, and another plugin for another feature and so on, and it's really anooyng having to use a lot of plugins and updating them and so on just to use some basic features that needs to be core features. you can never count on third party plugins to make the work.

@zaehlpixel

This comment has been minimized.

Copy link

commented Nov 7, 2018

Still also waiting!

@1sourceweb

This comment has been minimized.

Copy link

commented Nov 16, 2018

Would love this feature...add a background slider to a column....something like this: http://www.sutco.ca/Home.aspx

@aaallan98

This comment has been minimized.

Copy link

commented Nov 21, 2018

I'm waiting for this feauture too :( I managed to do the trick with negative margins but it messes up responsiveness

@digitalwordings

This comment has been minimized.

Copy link

commented Nov 30, 2018

+1

@Mrsnibs

This comment has been minimized.

Copy link

commented Dec 3, 2018

+1

Just started working with elementor today, and spent a good while looking for where to do this. Very surprised it isn't included. I didn't imagine it would be an unusual option. Not really wanting a third party plugin just for this. Hmm.

@matthewwoodard

This comment has been minimized.

Copy link

commented Dec 3, 2018

+1

1 similar comment
@webgurudesign

This comment has been minimized.

Copy link

commented Dec 6, 2018

+1

@tstrebeckc1

This comment has been minimized.

Copy link

commented Dec 14, 2018

+1

This would be a great feature included with Elementor!

@RudiVL

This comment has been minimized.

Copy link

commented Dec 19, 2018

Hope you will include this feature !!
Would also love to see the option to have it passive but then random at every visit, so the visitor gets a new experience each visit to the post or page.

At this site is a code for it: https://nathaningram.com/random-background-images-for-wordpress/

@whatsnewsisyphus

This comment has been minimized.

Copy link

commented Dec 20, 2018

Just wanted to say that I would pay for elementor pro for this feature. Many people end up using slider revolution or such complicated plugins to simply have a hero header with a changing background, this would essentially address that gaping hole. Make a full height row, throw in background images, center column content, hero done! I think fading is a good default transition.

Also VC and other editors have this feature already.

@RudiVL

This comment has been minimized.

Copy link

commented Dec 20, 2018

Indeed, and leave the option to not rotate the image, but make it static for each visit, but randomize it every time one refresh or visit. Result, a new experience every time.

@nohl

This comment has been minimized.

Copy link

commented Jan 14, 2019

Pleeeeeze? I use Anywhere Elementor Pro for this one feature. Would be nice to have fewer plugins. Here is a (for instance) Screenshot of an Elementor section with AE Pro background slider, a headline in one column and social share buttons in another. Like previous poster mentioned, it is handier than background video, and the creative possibilities are more robust. Thanks in Advance!

anywhere-elementor-background-slider

I never would have guessed you could do a background slider with Anywhere Elementor - Their website is light on details or examples.

@Fubart

This comment has been minimized.

Copy link

commented Jan 22, 2019

I could also really use this as a elementor pro user!
The other (free) plugins I tried all lack responsive settings.
And I'm not paying another 25 dollars/year for a switching background image...

@clickharder

This comment has been minimized.

Copy link

commented Jan 31, 2019

+1

@ljgarnes

This comment has been minimized.

Copy link

commented Feb 11, 2019

100% agree. I hate adding yet another plugin. Slider Revolution is decent but alot of work for something so simple.

@yeshansachithak

This comment has been minimized.

Copy link

commented Feb 13, 2019

I'm using Elementor Pro and I'm trying to create a website land page like below website with parallax effect in Elementor. As far as I know, there is no option to add slider to section background. With a single background image I can have parallax effect when scrolling. Tried with Slider Widget and Carousel Widget. But, I was unable to complete it.

https://helmicksculpture.com/

How do I create a home page like above sample website?

Thanks!

@yeshansachithak

This comment has been minimized.

Copy link

commented Feb 13, 2019

Hi All,

SAMPLE WEBSITE

I was trying to implement same slider with parallax scroll effect like above website using Elementor Pro. As per Elementor support we cannot implement that.

AE Pro have an option to add slider images. But it didn't work with parallax. Also, AE Pro support and essential-addons confirmed that their plugins are not support for my requirement.

Then I followed this article to implement parallax. Which was perfect for one background image.

With using above tutorial. I created below bgSlider() function to full fill my requirement. Hope this will help someone.

function jquery_parallax()
{
    ?>
    <script language="JavaScript" type="text/javascript">
        (function ($) {
            'use strict';
            var testMobile;
            var isMobile = {
                Android: function () {
                    return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function () {
                    return navigator.userAgent.match(/BlackBerry/i);
                },
                iOS: function () {
                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                },
                Opera: function () {
                    return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function () {
                    return navigator.userAgent.match(/IEMobile/i);
                },
                any: function () {
                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                }
            };

            var parallax = function () {
                testMobile = isMobile.any();
                if (testMobile == null) {
                    $(".parallax").parallax("50%", 0.3);
                }
            };

            //Step 01: Copy below till `End Added by Yesh`
            //Added by Yesh
            var CONSOLE_MODE = false;

            function bgSlider(a) {
                (CONSOLE_MODE) ? console.log('bgSlider :::: called') : "";
                this.imageList = [
                    'http://myweb.com/wp-content/uploads/2019/02/Nidakule-Guney-Aukett-Swanke-2.jpg',
                    'http://myweb.com/wp-content/uploads/2019/02/Tefken-Oz-Levent-Ofis-Aukett-Swanke-3.jpg',
                    'http://myweb.com/wp-content/uploads/2019/02/Lesso-Mall-Aukett-Swanke-2.jpg',
                    'http://myweb.com/wp-content/uploads/2019/02/Lillie-Square_Veretec-5.jpg',
                    'http://myweb.com/wp-content/uploads/2019/02/Radisson-Hotel-Tunisia-Aukett-Swanke-3.jpg'
                ];
                this.widgetID = a;
                this.widgetElm = "";
                this.itemDuration = 5000;
                this.rotateTick = 0;
                this.nxtElem = 0;
                this.unInit = function () {
                    (CONSOLE_MODE) ? console.log('bgSlider :: unInit :: called') : "";
                    clearTimeout(this.rotateTick);
                };
                this.bgPreload = function () {
                    $(this.imageList).each(function () {
                        $('<img/>')[0].src = this;
                        // Alternatively you could use:
                        // (new Image()).src = this;
                    });
                };
                this.rotateNext = function (b) {
                    (CONSOLE_MODE) ? console.log('bgSlider :: rotateNext :: called') : "";
                    if (!b) {
                        if ((this.imageList.length - 1) < this.nxtElem) {
                            this.nxtElem = 0;
                        }
                        var url = this.imageList[this.nxtElem];
                        //this.widgetElm.animate({opacity: 0}, 'fast');
                        //this.widgetElm.css('background-image', 'url(' + url + ')');
                        //this.widgetElm.animate({opacity: 1}, 'slow');
                        //
                        this.widgetElm.stop().animate({opacity: 0}, 1000, function () {
                            $(this).css({'background-image': "url('" + url + "')"})
                                .animate({opacity: 1}, {duration: 1000});
                        });
                        //
                        this.nxtElem++;
                    }
                    var that = this;//assign same object
                    this.rotateTick = setTimeout(function () {
                        that.rotateNext(false);
                    }, this.itemDuration);
                };
                this.initSlider = function () {
                    (CONSOLE_MODE) ? console.log('bgSlider :: initSlider :: called') : "";
                    this.widgetElm = $('#' + this.widgetID);
                    this.bgPreload();
                    this.rotateNext(true);
                };
                this.initSlider();
            }

            //End Added by Yesh

            // Dom Ready
            $(function () {
                parallax();
                // Step 02: call to function
                // Added by Yesh
                new bgSlider('myparallax');
                //End Added by Yesh
            });
        })(jQuery);

        /*
         jQuery Parallax 1.1.3
         Author: Ian Lunn
         Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

         Dual licensed under the MIT and GPL licenses:
         http://www.opensource.org/licenses/mit-license.php
         http://www.gnu.org/licenses/gpl.html
         */
        !function (n) {
            var t = n(window), e = t.height();
            t.resize(function () {
                e = t.height()
            }), n.fn.parallax = function (o, r, i) {
                function u() {
                    var i = t.scrollTop();
                    l.each(function (t, u) {
                        var l = n(u), f = l.offset().top, s = a(l);
                        i > f + s || f > i + e || l.css("backgroundPosition", o + " " + Math.round((l.data("firstTop") - i) * r) + "px")
                    })
                }

                var a, l = n(this);
                l.each(function (t, e) {
                    $element = n(e), $element.data("firstTop", $element.offset().top)
                }), a = i ? function (n) {
                    return n.outerHeight(!0)
                } : function (n) {
                    return n.height()
                }, (arguments.length < 1 || null === o) && (o = "50%"), (arguments.length < 2 || null === r) && (r = .1), (arguments.length < 3 || null === i) && (i = !0), t.bind("scroll", u).resize(u), u()
            }
        }(jQuery);
    </script>
    <?php
}

if (!(is_admin())) {
    wp_enqueue_script('jquery');
    add_action('wp_head', 'jquery_parallax');
}

Feel free to correct if anything wrong...
Thanks!

@whatsnewsisyphus

This comment has been minimized.

Copy link

commented Feb 15, 2019

Pretty off topic here, might want to post on stack overflow or reddit.

@aalani95

This comment has been minimized.

Copy link

commented Mar 30, 2019

Any Updates on this one, it's a very important feature. The slider widget is not cutting it lol.

btw I really like what you guys been doing, you're just killing it.

@drewclifton

This comment has been minimized.

Copy link

commented Apr 5, 2019

Looking for this as well. Thanks.

@qwik3r

This comment has been minimized.

Copy link

commented May 8, 2019

+1

1 similar comment
@MrBushid0

This comment has been minimized.

Copy link

commented Jun 5, 2019

+1

@TheMangoTrain

This comment has been minimized.

Copy link

commented Jun 23, 2019

This discussion thread is supposed to be about background slideshows... not parallax backgrounds.

@ayhanmalkoc

This comment has been minimized.

Copy link

commented Jul 5, 2019

+1

@Freakatiki

This comment has been minimized.

Copy link

commented Jul 9, 2019

+1 +1 +1
This request is almost two years old ... and as we see in the comments: there are plenty of people that would love to be able to have an option for
fullpage background slideshow, within Elementor Pro.
(and no: this is NOT about parallax)

please Elementor, don't make us use another extra extra plugin to achieve this ...

@godwin10x

This comment has been minimized.

Copy link

commented Jul 13, 2019

I'm in full support.

A simple background slider on sections would make elementor a cutting edge tool.

Thank you.

@krol1k

This comment has been minimized.

Copy link

commented Jul 27, 2019

+1

@ivanchernyakov

This comment has been minimized.

Copy link

commented Aug 3, 2019

@swinggraphics

This comment has been minimized.

Copy link

commented Aug 15, 2019

There is a solution without any plugins:
https://businessupwebsite.com/background-slider-with-elementor-only/

Note to Elementor devs: this isn't a perfect work-around because it does not allow for vertical centering of the photos if they overflow the section.

@arielk arielk added this to the 2.7.0 milestone Aug 21, 2019
@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Sep 9, 2019

This issue has been resolved in Elementor v2.7

Feel free to update

Thanks!

@shilo-ey shilo-ey closed this Sep 9, 2019
@1sourceweb

This comment has been minimized.

Copy link

commented Sep 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.