VERTICAL IMAGE CAROUSEL - GSAP Elementor

Поделиться
HTML-код
  • Опубликовано: 12 дек 2024

Комментарии • 54

  • @nicopalmkvist
    @nicopalmkvist  6 месяцев назад +2

    All My Elementor Projects in 60 Seconds: ruclips.net/video/wSv4C3rEp-g/видео.html
    Live demo: michellewp.com/streama/

    • @videowebsite2018
      @videowebsite2018 6 месяцев назад +1

      You fixed the glitch! Thank you!

    • @stefanoaiellocopy
      @stefanoaiellocopy Месяц назад

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

  • @arbbell
    @arbbell 5 месяцев назад +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  5 месяцев назад +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!

  • @Taatan12
    @Taatan12 Месяц назад

    es justamente lo que necesitaba

  • @stefanoaiellocopy
    @stefanoaiellocopy Месяц назад +2

    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 Месяц назад +1

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

  • @bobbyryandra
    @bobbyryandra 5 дней назад

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

  • @FactScriber
    @FactScriber Месяц назад +2

    how do i stop the carousel from overlapping my main menu

  • @emvee2916
    @emvee2916 4 месяца назад +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 :)

  • @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?

  • @kapmagic
    @kapmagic Месяц назад

    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

  • @efintina
    @efintina Месяц назад

    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.

  • @brunoaguilar689
    @brunoaguilar689 4 месяца назад +1

    Very nice content guys. Congrats

  • @aymonshik
    @aymonshik 4 месяца назад

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

  • @campusconnecttv170
    @campusconnecttv170 Месяц назад

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

  • @campusconnecttv170
    @campusconnecttv170 6 месяцев назад +1

    You’re so amazing ❤❤❤

  • @josipgrgic9683
    @josipgrgic9683 3 месяца назад

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

  • @rgspacelictics
    @rgspacelictics 4 месяца назад

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

  • @YouMake_ma
    @YouMake_ma 5 месяцев назад +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  5 месяцев назад +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 3 месяца назад +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 Месяц назад

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

    • @manasamajam9198
      @manasamajam9198 23 дня назад

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

    • @andrijaya6194
      @andrijaya6194 4 дня назад

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

  • @ericuk9481
    @ericuk9481 2 месяца назад

    Hello, How does it look like on mobile?

  • @Aziz-Ahmed-UK
    @Aziz-Ahmed-UK Месяц назад

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

  • @whitekriminal545
    @whitekriminal545 6 месяцев назад +1

    Nice! 🔝

  • @Edwardrangels
    @Edwardrangels 5 месяцев назад

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

    • @nicopalmkvist
      @nicopalmkvist  5 месяцев назад

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

  • @RaviTejaChillara
    @RaviTejaChillara 4 месяца назад

    can we loop it without the jerks in between?

    • @nicopalmkvist
      @nicopalmkvist  4 месяца назад

      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

  • @fhdsadfjiosdafsdfesafars8704
    @fhdsadfjiosdafsdfesafars8704 5 месяцев назад

    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 5 месяцев назад +1

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

    • @aymonshik
      @aymonshik 4 месяца назад

      @@fhdsadfjiosdafsdfesafars8704 Same here, @nicopalmkvist please help

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

  • @AhsanHameed-fu7bv
    @AhsanHameed-fu7bv 3 месяца назад

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

  • @IamDoQtorNo
    @IamDoQtorNo 5 месяцев назад

    Where do we go to download those examples?

    • @nicopalmkvist
      @nicopalmkvist  5 месяцев назад

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

  • @Henrikjaa
    @Henrikjaa 4 месяца назад +1

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

  • @thewebstylist
    @thewebstylist 4 месяца назад

    So awesome!

  • @AmarSharma-o1k
    @AmarSharma-o1k 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;
      }

    • @AmarSharma-o1k
      @AmarSharma-o1k 2 месяца назад

      @@nicopalmkvist Thank you. it works now

  • @leizerfroilich
    @leizerfroilich 17 дней назад

    I put the updated code but it's export above

  • @dercrazed
    @dercrazed 4 месяца назад +1

    thnaks!

  • @twinkleaggarwal
    @twinkleaggarwal 3 месяца назад

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