Slider - Webflow tutorial

Поділитися
Вставка
  • Опубліковано 10 лис 2024

КОМЕНТАРІ • 82

  • @Labattfartoui
    @Labattfartoui 3 роки тому +84

    Webflow is amazing, but it wouldn't be half as good without all these videos. I've watched probably 100 of them so far and it's made a huge difference in the speed and quality of my work. Love the humor, too. Makes boring subjects much more fun.

  • @ErdalEyican
    @ErdalEyican 5 років тому +4

    omg i was so clumsy with fitting in images in the slider and making it look nice. So happy i came across this video and my troubles have gone by like a soothing breeze

  • @carpathianshepherdess4990
    @carpathianshepherdess4990 4 роки тому +4

    The humour in these is brilliant! Thanks for the tutorial series.

  • @DANNYFIGDESIGNS
    @DANNYFIGDESIGNS 5 років тому +10

    I can actually tell you're under the weather. That's how much I listen to you. lol. You are a Super Trooper! Love your vids. Sorry if I'm wrong...

    • @nipun2735
      @nipun2735 4 роки тому

      I think the audio has a slight echo thats why it seems like it. Probably sound dampening configuration is causing issues.

  • @marijnkraai1375
    @marijnkraai1375 5 років тому +31

    Excellent video, I've already learned a lot. I also really love the little jokes in the video's ;)

  • @valikvalentiev2381
    @valikvalentiev2381 4 роки тому +10

    But can I create a custom slider with Webflow? For example: can I place right and left arrows above in the top right corner above the text? And can I upload my own vector icons? Just want to know how customizable Webflow really is. Thanks

  • @thevezs
    @thevezs 2 роки тому +6

    Webflow tutorials are great - the only issue I have is that it doesn't solve real project scenarios like on mobile. This looks great on desktop but is unusable on mobile.

  • @pieteb_nl
    @pieteb_nl 2 роки тому +2

    This tutorial is just not the same without that one guy that does all the Webfllow tutorials

  • @shbdesign9010
    @shbdesign9010 4 роки тому +4

    What about images in Mobile Layout, I have some nice width renderings looks great on desktop but in Mobile they suck is there an option to solve this?

  • @Flowkey247
    @Flowkey247 10 місяців тому

    Great video!

  • @harshstudent2021
    @harshstudent2021 2 роки тому

    Webflow is amazing

  • @shajibkumarsutradhar4626
    @shajibkumarsutradhar4626 2 роки тому

    Really Love webflow

  • @alexdelis8510
    @alexdelis8510 5 років тому +2

    You had me at Top Dog

  • @DeepfriedBaby
    @DeepfriedBaby 4 роки тому

    I remember when creating a slider was a massive project. This is much better. haha

  • @d7656
    @d7656 Рік тому +1

    Thank you so much. I was expecting this to be way harder in my mind but this was unbelievably easy to replicate. God bless

  • @ayasuzuki7452
    @ayasuzuki7452 5 років тому

    Very nice video! I like the “bun, proteins, toppings, bun”

  • @loup.random
    @loup.random 6 років тому +2

    Excellent video, thanks !!

  • @nickgoesvestmode
    @nickgoesvestmode 5 років тому +3

    Can your slides be called from a collection?

  • @Digi_ClientShowcase
    @Digi_ClientShowcase 3 роки тому +3

    Any chance of adding a function directly to the editor to change the Nav-Circles colour without having to use custom code to do so?

  • @neelsharma3
    @neelsharma3 4 роки тому +1

    This guy is awesome

  • @MohammadaAprilianto
    @MohammadaAprilianto Рік тому +1

    how to make slider from collection list?

  • @shaileechoxi6268
    @shaileechoxi6268 4 роки тому +1

    I need help with this. I want to use lightbox inside a slider. Is that possible or can you share any source?

  • @doingtheellathing
    @doingtheellathing 2 роки тому

    The buttons shown to adjust image placement and things like tiling is not showing up for me. Please help

  • @obejuanfacio5350
    @obejuanfacio5350 5 років тому +1

    HELP PLEASE. Why do you get more settings in your right side settings panel? For example, for my image settings for the slider I don't get the same options as position, cover, contain, etc. Please help me.

    • @OKeeffeSamuel
      @OKeeffeSamuel 5 років тому

      They updated the style panel, I'm having trouble because I want my images to be contained but don't know how with the new style panel..

  • @marietoni9953
    @marietoni9953 10 місяців тому

    how can we delete a alide added by mistake ? And how can we change the order of appearance of the slides ?

  • @tanvinewyork
    @tanvinewyork Рік тому

    Okay, I I want to add a powerpoint to my portfolio and I feel the slider is the best way to go about. I am trying to add multiple images onto the slider but there is no option to export multiple images from CMS entry. Second, if I make a change in one template page, it leads to a corresponding change in all the pages. The content of the deck per page is dynamic, not static - hence need help with approach 1!

  • @redweamericas4237
    @redweamericas4237 2 роки тому

    I try to adapt the size of the slider image, but in the mobile version it always comes out cut off. How do I solve it?

  • @hpplotter6925
    @hpplotter6925 4 роки тому +1

    Is it possible to add javascript code to webflow to pull in web content?

  • @jansleyreal
    @jansleyreal Рік тому

    Can you change the color of the arrows?

    • @Webflow
      @Webflow  Рік тому +1

      Yes you can. The arrows are just SVG icons that have no fill color in their SVG codes. So all you have to do is change the text color their parent element. Hope this helps :)

    • @jansleyreal
      @jansleyreal Рік тому

      @@Webflow beautiful thank you!

  • @PhillGraaf
    @PhillGraaf 5 років тому +1

    such a great Tutorial... The only thing is that I add Images to my solider but When I preview them, they aren't visible! At first it worked but now... not anymore.

    • @Webflow
      @Webflow  5 років тому +1

      Hey there, I need more info so I can help you resolve this issue. Please, can you post your question with as much information as possible (read-only link, screenshots and a description of the issue), on the Webflow Community Forum (forum.webflow.com/) and we can help you there.

  • @Ekarron
    @Ekarron 3 роки тому +1

    Nice, but how to make the background transparent? I want to make png images slideshow without the gray background of default "slider"

    • @whellintonrocha8734
      @whellintonrocha8734 2 роки тому

      Hi, i've been searching for this as well, have you found the answer somewhere? Could you share it here? I think the only way is using custom code but i'm not sure.

    • @Ekarron
      @Ekarron 2 роки тому +1

      @@whellintonrocha8734 nope, I've tried to set it up with images and time triggers but it breaks 50% of the time.

  • @franci-uz
    @franci-uz 2 роки тому

    OMG, my slider just goes crazy! What's the standard for duration and time delay please?

    • @Webflow
      @Webflow  2 роки тому

      Try setting the time delay to 5000 ms (which is 5 seconds) and the duration to 500 ms (which is half a second). Hope this helps 😁

  • @haeki9975
    @haeki9975 5 років тому

    whats the best image size for the slider ? can anyone help me with that please

  • @dave3k
    @dave3k 6 років тому +1

    Can the left and right icons be replaced with custom icons and can the pagination be styled?

    • @Webflow
      @Webflow  6 років тому +2

      Yes, you can check how here: university.webflow.com/article/sliders#customizing-arrow-icons & here: university.webflow.com/article/sliders#styling-the-slide-nav-dots

  • @wesleyjaques2913
    @wesleyjaques2913 2 роки тому

    Can you add a hyperlink to a slider background image? if so how?

    • @Webflow
      @Webflow  2 роки тому

      Yes. You can add any element into a slide. Including link blocks. Hope this helps :)

  • @roomathousandyearswide
    @roomathousandyearswide 2 роки тому

    And how do you make the arrows and dots smaller?

    • @Webflow
      @Webflow  2 роки тому

      At this time, you cannot style the dots on the canvas. You'll need to use custom code. As for the arrows, you can make those smaller on the canvas by using the style planel.

  • @taposhsorkar1613
    @taposhsorkar1613 7 місяців тому

    slider arrow color can't change without code

  • @marvingrass8
    @marvingrass8 3 роки тому

    I can't make a container inside the slider. It says It is not possible to make a container inside a container. So I added my Header directly onto the slider. Anyone else with this problem?

  • @gingalaxy8874
    @gingalaxy8874 3 роки тому

    why is my slider not appearing in the preview? only one navigation dot is visible. tq

    • @Webflow
      @Webflow  3 роки тому +1

      Hi there! It sounds like this question may be specific to your Webflow site instance.
      Can you please reach out to us here with more details, our team is happy to help: university.webflow.com/support
      Thanks in advance!

  • @kehkashananwar8508
    @kehkashananwar8508 Рік тому

    Hello, Thanks for this video. How can we link slider's image which leads to another page or section?

    • @Webflow
      @Webflow  Рік тому

      This article may help you with that: university.webflow.com/lesson/section-link#how-to-link-to-a-section-on-another-page

  • @zetzzz708
    @zetzzz708 Рік тому

    How do you make a slider automatic by default without arrows or buttons

    • @Webflow
      @Webflow  Рік тому

      You can give the left and right arrow elements and the slide nav a display:none if needed.

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

    Height not changing by chnging the height of slide/background image :/

  • @goldencatpat
    @goldencatpat Рік тому

    Why is there no inbuilt thumbnail option after all these years????

  • @Schecter1989
    @Schecter1989 3 роки тому

    How would I go about rotating 8 pictures from right to left, but only having 4 pictures showing at a time on the page? Sort of like a carousel.

    • @Webflow
      @Webflow  3 роки тому +1

      Hi there! Great question! Setting your slide width to 25% of your parent Slider element should set 4 slides to display at a time.
      If you're having any trouble with this implementation, please let our community know.
      We're here to help!
      forum.webflow.com/

    • @b40
      @b40 2 роки тому

      @@Webflow i tried this and it actually works.... but when i click on the arrow there is an issue : it slides from slide 1 to slide 3 directly (seems like the next and previous action is set depending the width). Any clue to solve this? Thanks a lot. Bernard

  • @kukurumba3556
    @kukurumba3556 6 років тому +1

    How to customize slider tabs?

    • @Webflow
      @Webflow  6 років тому +1

      Check out some options of how to style the slider nav tabs here: university.webflow.com/article/sliders#styling-the-slide-nav-dots

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

    and the responsive layout???!

  • @jesusbootcamp660
    @jesusbootcamp660 2 роки тому

    if the image size doesn't work, just select the mask and then change it

  • @stefmartinuzzi1649
    @stefmartinuzzi1649 5 років тому

    For some reason I wasn't able to copy the container on slide 1 and paste into slide 2. Is this because I am using a free trial version?
    Please message me back ASAP if you can.
    I'm enjoying the learning process thus far though. Great videos

    • @Webflow
      @Webflow  5 років тому +1

      Hey Stef! Free, there's no trial version. You can use Webflow for free forever and you should be able to use all features included in the free plan without such limitations.
      That said, some parts of sliders, like other components, cannot be pasted into other elements. So, I need to know which container are you copying? The "slide 1" itself? You cannot paste a slide inside a slide, but you can paste a slide in the mask (the parent container of all slides). So, basically, you can design a slide then duplicate it (copy it and paste it in the mask).
      Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're having any trouble when designing your site, you can always post on the *Webflow Community Forum* (forum.webflow.com/) with as much information as possible (read-only link (wfl.io/2Tupw47), screenshots and a description of the issue), and our amazing community and staff can help you there.

    • @stefmartinuzzi1649
      @stefmartinuzzi1649 5 років тому

      @@Webflow Thank You, I got it to work. There was a tad of confusion on my part so I apologize

    • @stefmartinuzzi1649
      @stefmartinuzzi1649 5 років тому

      @@Webflow Also thank you for replying back so fast

    • @Webflow
      @Webflow  5 років тому

      You're most welcome! Glad it's all working great now!

  • @jamiesoja
    @jamiesoja 3 роки тому

    Is there a tutorial on how to include vertical image of different dimensions?

    • @Webflow
      @Webflow  3 роки тому

      Hi Jamie, thank you so much for asking about a tutorial for a vertical image in a slider. We don't have a tutorial on a vertical image slider at this time.
      Are you referring to a slider which moves vertically instead of horizontally? Or are you looking for a different tutorial? Please let us know!
      A great place to find solutions to Webflow questions is on the Webflow Forum: forum.webflow.com/

  • @isakhejnesen
    @isakhejnesen 6 років тому

    Why the re-uploade?

    • @daviddipasquale586
      @daviddipasquale586 6 років тому

      My guess is that they are rebranding webflow tutorials with this new guy, which is awesome in my opinion

    • @isakhejnesen
      @isakhejnesen 6 років тому

      It is the same guy as last video about sliders. But i found out they made som changes. example is they added a backup information into this video, that wasnt in the last one.

    • @Webflow
      @Webflow  6 років тому +2

      Hey Isak, in the last video, we had mistakenly applied flex settings on a slide which actually breaks the slider element. That's why we remade the video to fix that issue and let you all know how you can use flex settings within sliders without actually breaking the sliders (nest a flex container or a div block in your slide). And while we were at it, we added some helpful tips about backups. Hope this is helpful.

    • @isakhejnesen
      @isakhejnesen 6 років тому

      Webflow Thx for the reply, great work

    • @Webflow
      @Webflow  6 років тому

      Thanks, Isak!

  • @jakinrogel7876
    @jakinrogel7876 3 роки тому

    Just don't set any of the pictures to fixed. That will mess everything up

  • @yandex9188
    @yandex9188 6 років тому +4

    ecommercee

  • @mariojunio2214
    @mariojunio2214 2 роки тому

    its free