VERTICAL IMAGE CAROUSEL - GSAP Elementor

Поділитися
Вставка
  • Опубліковано 4 січ 2025

КОМЕНТАРІ • 55

  • @nicopalmkvist
    @nicopalmkvist  6 місяців тому +2

    All My Elementor Projects in 60 Seconds: ua-cam.com/video/wSv4C3rEp-g/v-deo.html
    Live demo: michellewp.com/streama/

    • @videowebsite2018
      @videowebsite2018 6 місяців тому +1

      You fixed the glitch! Thank you!

    • @stefanoaiellocopy
      @stefanoaiellocopy 2 місяці тому

      ​@@videowebsite2018 how can we fix that glitch too?

  • @arbbell
    @arbbell 6 місяців тому +5

    you are extremely professional. very good production value for such a small channel, i hope you grow big! you helped me and many others a lot

    • @nicopalmkvist
      @nicopalmkvist  6 місяців тому +1

      Thank you so much for this comment, it means a lot. More valuable video content is on the way.🔜

  • @eekeek433
    @eekeek433 6 місяців тому +3

    This is a awesome feature to have on any website, thankyou for sharing :)

    • @nicopalmkvist
      @nicopalmkvist  6 місяців тому

      We thought so too :) It’s an absolute pleasure!

  • @FactScriber
    @FactScriber 2 місяці тому +2

    how do i stop the carousel from overlapping my main menu

  • @stefanoaiellocopy
    @stefanoaiellocopy 2 місяці тому +3

    I think you miss the CSS about the heading, where is it? Thank you, i'm following your tutorial step by step and it's very easy

    • @friendly421
      @friendly421 2 місяці тому +2

      as the video is of quality, we can see the following code :
      selector .elementor-heading-title{
      background-image: linear-gradient(180deg, #FFFFFF, #7D7D7D);
      background-clip: text;
      -webkit-background-clip:text;
      }

  • @Taatan12
    @Taatan12 2 місяці тому

    es justamente lo que necesitaba

  • @bobbyryandra
    @bobbyryandra 28 днів тому

    Hi guys, thanks alot for the video.
    From Bobby in Bekasi - Indonesia

  • @efintina
    @efintina 2 місяці тому

    Hi. I purchased your template, but, on mobile, it jumps. I tried to add more then 4 images, but after looping first 4 it jumps to start one.

  • @tammymorales596
    @tammymorales596 3 місяці тому +1

    Thank you for this video! It's the perfect solution for what I've been trying to do. For the custom CSS for the heading... I don't see it in the link that you pasted. I only see your responsive code in addition to the 3 carousel CSS codes. Can you provide the heading CSS code please?

  • @campusconnecttv170
    @campusconnecttv170 2 місяці тому

    please is there a tutorial on how the horizontal slider was created

  • @rgspacelictics
    @rgspacelictics 5 місяців тому

    How fo I make a sign up page with data stored for users as email sign in in WordPress with custom slider as it

  • @kapmagic
    @kapmagic 2 місяці тому

    Unfortunaly my first coluns overlaps my header, when i put 90 padding on Main Container, the STEP 1 Columns dont obbey and keeps overlaping my Header. May is escaping me something?
    Great Work

  • @aymonshik
    @aymonshik 5 місяців тому

    very nice work, but when I used the updated code, the carousel is floating up the screen, please help

  • @emvee2916
    @emvee2916 5 місяців тому +1

    Unfortunately, I already tried the same effect byt pictures are jumping with your code and live site at the end of the animation.
    That is because there should be a duplicate of each pic to ensure smooth transition and translateY should be -100% minus gap.
    Andrea Egli made a nice tutorial on that :)

  • @josipgrgic9683
    @josipgrgic9683 4 місяці тому

    can you link image to a gallery or to a post? each image to its custom gallery or post

  • @ericuk9481
    @ericuk9481 3 місяці тому

    Hello, How does it look like on mobile?

  • @YouMake_ma
    @YouMake_ma 6 місяців тому +1

    Hello ive followed this tutorial step by step but in the live page its still bugging for me, its not as smooth as your live demo. any possible reason? note that i have all plugin up to date.

    • @nicopalmkvist
      @nicopalmkvist  6 місяців тому +1

      Is it because your slider occasionally makes a little "jump"? If so, we've updated the code at this link: lifeonablock.com/streama-update/
      Alternatively, you can download our template and import it. It's the one from our live demo.

    • @francoisalbert5605
      @francoisalbert5605 4 місяці тому +1

      @@nicopalmkvistThank you! The new CSS code works fine! ...there is still a problem about the columns, since the animation goes over the main menu. I set 90px of top margin for the main container, but the columns go beyond the margin...

    • @iSeee_Uuu
      @iSeee_Uuu 2 місяці тому

      @@francoisalbert5605 I have the same problem , WHAT to do ?

    • @manasamajam9198
      @manasamajam9198 Місяць тому

      ​@@francoisalbert5605Did you find any solution.if any please help me. Thanks 😊

    • @andrijaya6194
      @andrijaya6194 28 днів тому

      @@nicopalmkvist i send an email is this work for another object? not an image and more than 3, i want to set 4 container

  • @umzbiolinemanufacturersdnbhd
    @umzbiolinemanufacturersdnbhd 16 днів тому

    it not working in mobile version

  • @Aziz-Ahmed-UK
    @Aziz-Ahmed-UK Місяць тому

    Challenge, how can we make it 3d diagonal? intead of vertical

  • @brunoaguilar689
    @brunoaguilar689 5 місяців тому +1

    Very nice content guys. Congrats

  • @campusconnecttv170
    @campusconnecttv170 6 місяців тому +1

    You’re so amazing ❤❤❤

  • @AhsanHameed-fu7bv
    @AhsanHameed-fu7bv 4 місяці тому

    Can anyone help me with the issue. It's working fine. Whenever it's start next loop it's shows ak fliker

  • @fhdsadfjiosdafsdfesafars8704
    @fhdsadfjiosdafsdfesafars8704 6 місяців тому

    is there a way to make it so the image in the carousel loops back instead of teleporting back to its original spot

    • @fhdsadfjiosdafsdfesafars8704
      @fhdsadfjiosdafsdfesafars8704 6 місяців тому +1

      just checked other comments and found the patch code but now the carousel is floating up the screen

    • @aymonshik
      @aymonshik 5 місяців тому

      @@fhdsadfjiosdafsdfesafars8704 Same here, @nicopalmkvist please help

  • @RaviTejaChillara
    @RaviTejaChillara 5 місяців тому

    can we loop it without the jerks in between?

    • @nicopalmkvist
      @nicopalmkvist  5 місяців тому

      Since we released the video, we have found a solution to this problem. We have updated it on our demo: michellewp.com/streama/
      We will release a video about it later this summer, but for now, the only option is to buy our template on Gumroad and import the updated version. The link is here:michellewp.gumroad.com/l/umfbej

  • @Edwardrangels
    @Edwardrangels 6 місяців тому

    Hello! I try to buy this effect through the link you provided, but there is nothing

    • @nicopalmkvist
      @nicopalmkvist  6 місяців тому

      Hi @Edwardrangels - here is the link: michellewp.gumroad.com/l/umfbej

  • @Henrikjaa
    @Henrikjaa 4 місяці тому +1

    I followed the instructions, but the photos does not loop..

  • @leizerfroilich
    @leizerfroilich Місяць тому

    I put the updated code but it's export above

  • @lucas101ish
    @lucas101ish 4 місяці тому

    Does this work with videos too rather than just images?

    • @nicopalmkvist
      @nicopalmkvist  4 місяці тому

      That could actually be pretty cool to try. But I don't no if it works.
      In theory it does, you should just change the background of the column to and video.

  • @IamDoQtorNo
    @IamDoQtorNo 6 місяців тому

    Where do we go to download those examples?

    • @nicopalmkvist
      @nicopalmkvist  6 місяців тому

      You can download them here: lifeonablock.com/strema-css/

  • @RTX4060Playground
    @RTX4060Playground 2 місяці тому

    Is this the code for title and text ? is it correct ?
    selector -elementor-heading -title{
    background-image: linear-gradient(180deg , #FFFFFF, #707070);
    background-clip: text;-webkit-background-clip
    text;
    }

    • @nicopalmkvist
      @nicopalmkvist  2 місяці тому +1

      No this code uses selector -elementor-heading -title, which is not correct syntax and not work.
      There is an unnecessary "-" in the class name that needs to be removed.
      So:
      selector .elementor-heading-title {
      background-image: linear-gradient(180deg, #FFFFFF, #7D7D7D);
      background-clip: text;
      -webkit-background-clip: text;
      }
      Or:
      selector .elementor-heading-title{
      background-image: linear-gradient(180deg , #FFFFFF, #7D7D7D);
      background-clip: text;
      -webkit-background-clip: text;
      }

    • @RTX4060Playground
      @RTX4060Playground 2 місяці тому

      @@nicopalmkvist Thank you. it works now

  • @whitekriminal545
    @whitekriminal545 6 місяців тому +1

    Nice! 🔝

  • @thewebstylist
    @thewebstylist 5 місяців тому

    So awesome!

  • @twinkleaggarwal
    @twinkleaggarwal 4 місяці тому

    After following all the instructions, it’s still not working on phone.
    Hope you revert.

  • @dercrazed
    @dercrazed 5 місяців тому +1

    thnaks!