Bootstrap 5 Carousel (with dark mode too!)

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

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

  • @shakhzodkhamidiy3732
    @shakhzodkhamidiy3732 3 года назад

    This is the best tutorial i have ever watched. You made evevrything clear to the end

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      Wow. Thank you so much for that comment! I really appreciate it and glad that it helped you.

  • @kingtyphoon
    @kingtyphoon 2 года назад

    I had trouble making my Boostrap carousel work but after I downloaded the source code and edited it it finally worked!
    Thanks for sharing the source code @A Designer Who Codes!

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 года назад

      You are so welcome! Happy to provide the working source code for you.

  • @alitalha7075
    @alitalha7075 3 года назад

    I was Really Helpful for me....

  • @vinegaucho
    @vinegaucho Год назад

    awesome thank you!

  • @nanometer6079
    @nanometer6079 2 года назад

    Thank you!

  • @rangabharath4253
    @rangabharath4253 3 года назад +1

    Awesome

  • @kszoknyik
    @kszoknyik 2 года назад

    followed every step letter by letter and when I checked it won't carousel for me like yours does. any help is appreciated

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 года назад

      Welcome to download the source code and compare your code to mine. Hope that helps.

  • @exoticgolfholidays
    @exoticgolfholidays 2 года назад

    Hi Haydn,
    I've been having trouble getting a bs5 carousel to work on my site so downloaded your code and still cannot get 2nd and 3rd images, either by slide, prev/next or the buttons...?!
    Am using Safari 13.1.2. Any ideas?
    p.s. have been sub'd for a while and find your lessons v.useful! Tks!

    • @exoticgolfholidays
      @exoticgolfholidays 2 года назад

      Could it be nesting?

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 года назад

      Make sure you have proper open/close tags. Also welcome to download my source code and troubleshoot it that way.

  • @volundros
    @volundros 3 года назад +1

    Spent about 30 minutes trying to figure out how come I couldn't get things aligned to the center of the page. I would have just looked at the code, but there's a spam trap to get into the code instead of just uploading it to github.

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      On average these videos take about 5-6 hours to create. In exchange for not charging, I just ask for your email. In addition, the follow up email has a giant unsubscribe feature. So for no money, you can have access to my files.

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      In addition, here’s a video all about centering: 3 Ways to Center Content in Bootstrap 5 (including div's and type)
      Again. No charge to watch or download the content.

  • @wedhimd
    @wedhimd 3 года назад

    how to adjust the height and width
    I want to be specific height and width but it isn't affect by my custom style
    and if it changes the height all the caption and indicators is disappear or shift

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      I relied on the container for the width. But you can do whatever you want. I just made sure it was responsive. The caption can move, but you can adjust. Rock the CSS!

  • @Aurora-lb4zb
    @Aurora-lb4zb 2 года назад

    Hey there,Thankyou for helping out..but I think the aria-current="true" is for the active slide alone because it is the slide which will show up when the users open the website.Am i right?

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 года назад +1

      Yep. I'm just following the guidelines set forth by Bootstrap.

  • @NabJungle
    @NabJungle 3 года назад

    Hello sir
    Please I’m trying to make a site
    And my carousel images aren’t of the same resolution
    Can you guide me on how to make my images the same size? And responsive
    Thank you 🙏

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      Resolution is irrelevant. Ratio is. 4:3, 1:1, 16:9. All images have to have the same ratio. So say 800x400 is the same as 1600x800 (2:1). Does that make sense?

    • @NabJungle
      @NabJungle 3 года назад

      @@ADesignerWhoCodes sorry I’m really new to all this 😅
      So you’re saying I can use any image but I have to set the ratios with css?

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад +1

      @@NabJungle it’s all good. You can use CSS contain. Or just go into Photoshop and crop them. The key is to make all the ratios the same

  • @swooc
    @swooc 2 года назад

    anyone know how to reduce the span height of the prev/next arrows? they seem to span the whole height of the carousel.

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 года назад

      Hmm. They shouldn't be expanding to the full height. Try and inspect the code. Maybe a height of 100% got added somehow.

    • @swooc
      @swooc 2 года назад

      @@ADesignerWhoCodes even the original code on bootstrap 5 documentation is like that. anyway, it doesn't matter. i ended up fixing it by using a class as suggested in the bootstrap 4 documentation instead of the button class suggested in bootstrap 5. i just changed the parameters of the a class code to match the bootstrap 5 code to get it working.

  • @sigmiami
    @sigmiami 3 года назад +1

    would have been good to get into the sizing in detail

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      Hey there. What are you looking for in regards to size? Thanks!

    • @sigmiami
      @sigmiami 3 года назад

      @@ADesignerWhoCodes sizing of the carousel. stretching the width of the viewport but not the height...

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 года назад

      Ah. Well the height moves in conjunction with the width. I used the breakpoints of the container to work with the width. Here's how the grid / width works: ruclips.net/video/ubVhIeVPwfQ/видео.html
      For specific width sizes, here's the breakpoints of the container:
      getbootstrap.com/docs/5.0/layout/containers/
      I think about images as completely fluid. So while I might have a max size, I'll let the images be fluid. Hope these 2 references help you.