Angular Slider - Build Angular Carousel From Scratch Tutorial

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

КОМЕНТАРІ • 56

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy  15 днів тому

    WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - ua-cam.com/video/vcfZ0EQpYTA/v-deo.htmlsi=BptT7eqgflHIoQiQ

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

    was cracking my head to implement carousel in angular. After seeing this, I was able to implement it easily. Thank you !

  • @nazar9796
    @nazar9796 Рік тому +2

    thank you, keep making videos on angular you are good at it

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

    Thanks man, simple & clear, it really helped me out!!

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

    this is so useful, thanks

  • @dayronalfaro9461
    @dayronalfaro9461 7 днів тому

    Nice video thx man

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

    simple and clear, thanks!!

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

    thank you, this helped me a lot!

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

    Thank you for this video, was very useful. I have implemented the slider following your method and looks fantastic. Now I need to figurred out how to add the touch screen swaping funtionlatiy in native Angular... any sugestion?

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

      Glad it was helpful! Can't recommend anything as I didn't implement that.

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

      @@MonsterlessonsAcademy I found a solution with hammer js... thank you again.

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

    Thanks simple and clear.
    How can we set this slider to be multi-image, that is, to pass 2 & 3 images at the same time?

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

    Thank you!

  • @diegogb1999
    @diegogb1999 8 місяців тому

    I did evertyhing as in the video and the carousel doesnt display, theres only like in a column 2 arros and 5 dots like a , any help pls?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  8 місяців тому

      There is a source code in the description.

    • @diegogb1999
      @diegogb1999 8 місяців тому

      @@MonsterlessonsAcademy I know, copied everything into mine and this happens

  • @mahdiandalib186
    @mahdiandalib186 8 місяців тому

    thx man , teach how to add css animations when each slide is changed

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  8 місяців тому

      I did that in Angular slider. You can look at the code and do similar things
      ua-cam.com/video/hUTwhn4BIyM/v-deo.htmlsi=AWwPenf5UTDd7hYH

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

    Great video. I have a question. Here why are we passing the data from the parent to the child using the input. Can we just directly implement the slides array in the child component?

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

      Sure!

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

      Yes, you totally can. But in case you want to handle input data in order to show or hide Carousel component then you need pass the data array from parent component. Child component can not hide itself.

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

    Loved the tutorial was able to implement on my portfolio! I’m trying to make adjustments for mobile, but since we are passing parentWidth as a prop I can’t adjust it. What’s the best approach? Are Media queries able to be written inline in React? Thanks!

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

      You can write all styles not inline but in additional file then in css.

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

      @@MonsterlessonsAcademy okay I will look further into it. I was just struggling to solve it since we have a few functions that are calling the passed parentWidth prop. I will keep working at it. Thanks for the response, love your tutorials! 🙌🏽

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

    hello,
    very good video!
    would have some version of how to put pagination ?! (ex: dots under the image)

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

    Is there any adventages or disadvantages, if we implement background image with Observable, instead of style binding?

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

      Your stream will be rerendered only when value of the stream changes. function is executed every time Angular change detection runs.
      Stream is always better controlled and more easier to tune to be fast.

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

      @@MonsterlessonsAcademy I was asking about using subject/behaviourSubject as currentIndex. And goToNext function, implemented as behaviourSubject.next(previousValue + 1) and async pipe to behaviourSubject in template, to display changes. Is this implementation any improvement compared to style binding?

  • @olegg650
    @olegg650 9 місяців тому

    how to add transition or animation to this slider ?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  9 місяців тому

      I don't have a follow up with transitions for angular but I did that for React.
      ua-cam.com/video/hUTwhn4BIyM/v-deo.htmlsi=4AAWmyOdeKJHzHrJ
      The code is obviosly for React but animations and autoscrolling is done there

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

    Great tutorial. Do you have any of your courses in Udemy?

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

    Is it possible to add multiple items in a single view?

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

    How do you make the slides autoplay?

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

      You can look on the follow up of react tutorial. The code is obviously different but the ideas are the same.
      ua-cam.com/video/jmNHcW_oszg/v-deo.html

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

    What code editor do you use?

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

    This isn't angular way, you need to use rxjs

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

    cool, but could you use notepad++ for clearer navigation?)))))

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

    Hi, Thanks for this Video. I have this problem "core.mjs:7635 ERROR TypeError: Cannot read properties of undefined (reading 'url')
    at CarouselComponent.getCurrentUrl (carousel.component.ts:18:51)". Can you please tell me how to fix it?

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

    Thank you so much! It helped a lot!