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 · 45 comments
Closed

[Feature Request] Background image transitions / slideshow #2898

ninefootone opened this issue Dec 6, 2017 · 45 comments

Comments

@ninefootone
Copy link

@ninefootone ninefootone 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
Copy link
Contributor

@bainternet bainternet commented Dec 6, 2017

@ninefootone

Thanks for your suggestion,

Can you link examples?

@ninefootone
Copy link
Author

@ninefootone ninefootone commented Dec 6, 2017

@bainternet
Copy link
Contributor

@bainternet bainternet commented Dec 10, 2017

@ninefootone

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

@nelsonguda
Copy link

@nelsonguda nelsonguda 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
Copy link

@BossOz BossOz commented Jun 21, 2018

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

@nivniv44
Copy link

@nivniv44 nivniv44 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
Copy link
Author

@ninefootone ninefootone commented Jul 2, 2018

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

@silvioghedin
Copy link

@silvioghedin silvioghedin commented Aug 8, 2018

still waiting ;)

@oshibobo
Copy link

@oshibobo oshibobo commented Aug 8, 2018

+1

@bentalgad
Copy link

@bentalgad bentalgad commented Aug 10, 2018

+1 Lovely idea!

@bentalgad
Copy link

@bentalgad bentalgad commented Aug 27, 2018

Still Waiting.

Another example link.

@dasignlady
Copy link

@dasignlady dasignlady 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
Copy link

@bentalgad bentalgad 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
Copy link

@zaehlpixel zaehlpixel commented Nov 7, 2018

Still also waiting!

@1sourceweb
Copy link

@1sourceweb 1sourceweb 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
Copy link

@aaallan98 aaallan98 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
Copy link

@digitalwordings digitalwordings commented Nov 30, 2018

+1

@Mrsnibs
Copy link

@Mrsnibs Mrsnibs 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
Copy link

@matthewwoodard matthewwoodard commented Dec 3, 2018

+1

1 similar comment
@webgurudesign
Copy link

@webgurudesign webgurudesign commented Dec 6, 2018

+1

@tstrebeckc1
Copy link

@tstrebeckc1 tstrebeckc1 commented Dec 14, 2018

+1

This would be a great feature included with Elementor!

@RudiVL
Copy link

@RudiVL RudiVL 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
Copy link

@whatsnewsisyphus whatsnewsisyphus 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
Copy link

@RudiVL RudiVL 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
Copy link

@nohl nohl 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
Copy link

@Fubart Fubart 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
Copy link

@clickharder clickharder commented Jan 31, 2019

+1

@ljgarnes
Copy link

@ljgarnes ljgarnes 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
Copy link

@yeshansachithak yeshansachithak 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
Copy link

@yeshansachithak yeshansachithak 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
Copy link

@whatsnewsisyphus whatsnewsisyphus commented Feb 15, 2019

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

@aalani95
Copy link

@aalani95 aalani95 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
Copy link

@drewclifton drewclifton commented Apr 5, 2019

Looking for this as well. Thanks.

@qwik3r
Copy link

@qwik3r qwik3r commented May 8, 2019

+1

1 similar comment
@MrBushid0
Copy link

@MrBushid0 MrBushid0 commented Jun 5, 2019

+1

@TheMangoTrain
Copy link

@TheMangoTrain TheMangoTrain commented Jun 23, 2019

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

@ayhanmalkoc
Copy link

@ayhanmalkoc ayhanmalkoc commented Jul 5, 2019

+1

@Freakatiki
Copy link

@Freakatiki Freakatiki 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
Copy link

@godwin10x godwin10x 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
Copy link

@krol1k krol1k commented Jul 27, 2019

+1

@ivanchernyakov
Copy link

@ivanchernyakov ivanchernyakov commented Aug 3, 2019

@swinggraphics
Copy link

@swinggraphics swinggraphics 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.

@shilo-ey
Copy link
Contributor

@shilo-ey shilo-ey commented Sep 9, 2019

This issue has been resolved in Elementor v2.7

Feel free to update

Thanks!

@shilo-ey shilo-ey closed this as completed Sep 9, 2019
@1sourceweb
Copy link

@1sourceweb 1sourceweb commented Sep 9, 2019

@19monty89
Copy link

@19monty89 19monty89 commented Apr 14, 2021

How do we apply a parallax effect on a section which has a background slideshow?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests