Swiper JS Tutorial | Carousel Slider with SwiperJS

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

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

  • @AdrianTwarog
    @AdrianTwarog  4 года назад +22

    I am trying to grow my channel, so if you find this video useful, #subscribe & hit the #bell :) Thanks for watching and hope you liked and learnt something new!

  • @JoseMVelazquez
    @JoseMVelazquez 4 года назад +37

    Just an observation, especially for people starting out: when using from a CDN you don't need to add both stylesheets and both scripts, like shown in the video, just one of each is needed. Either the normal versions or the minimized ones but not both.

    • @AdrianTwarog
      @AdrianTwarog  4 года назад +10

      Whoops, I didn't even notice that! I expected those to be the initial files, but looks like they were duplicate like you said (one min, one normal). Thanks for pointing it out!

    • @BehruzbekOtayev
      @BehruzbekOtayev 4 года назад

      What's the difference between the norm and minimized versions? One for desktop one for mobile?

    • @berest9154
      @berest9154 4 года назад +1

      @@BehruzbekOtayev minimized removed the spacing, tabs, comments sort of

  • @sasindumallawarachchi1822
    @sasindumallawarachchi1822 Год назад +1

    how to customize navigation buttons in the same style.

  • @cv3787
    @cv3787 4 года назад +8

    Nice library! I have built my own carousel slider from scratch and it lacks a lot of features. I hope I can learn some features from SwiperJS and add them to my own

    • @AdrianTwarog
      @AdrianTwarog  4 года назад +2

      C Vong yeah it’s a really useful one. You could probably get some good ideas for implementation

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

    hello freind, im a webmaster..
    I have two right and left divisions, when I put the slider swiper in one of the divisions it doesn't become responsive anymore, can you fixe that..think you

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

    I have made it work very well in Elementor on top of wordpress, and my landing page has several sections in this order
    1. header banner
    2.services
    3.about us
    4. slider with swiper js
    5.Contact
    6. Footer
    But when I have the top sections my swiperjs slider stops working, it will only work if my swiperjs slider has the sections below it.
    Someone who can help me.
    I've already tried z-index and I can't fix it. I don't know if I should do something in the js of swiper or in the css of my website

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

    But can how to make it responsive? just started watching and i liked it before finishing it :)

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

    Does somebody know how to set buttons out from swiper body?

  • @randomicallyrandom
    @randomicallyrandom 4 года назад +4

    Thanks for the video, Adrian!
    I have a question: I will not use the entire swiper script, so how can I use only the necessary?

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

    any body know how to make first load with specific slide number?
    ex: i have 3 slides. and i wanna make 2 on first load. so it seems center

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

    how can I change transition effect in this swiper?Please help me

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

    how to make navigation show on hovering only??

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

    THis tutorial teached anything

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

    Nice job Adrian I Appreciate you... Very usefull Video

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

    the explanation on the website on how to install this is uther garbage...

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

    Salam lassie Coyote Gerrad Izroil Sam Patrick Ferry nandez Smith family

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

    how can i use two or more absolutely different swipers in one (so to speak) project?

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

    If I only wanted to see a copy paste video, why would I open you?

  • @CricketHighlights-nt7nn
    @CricketHighlights-nt7nn 2 года назад

    Can i use it at professional project?

  • @yerihahn4679
    @yerihahn4679 4 года назад +1

    This is very easy and very useful video!!! I don't know english well and don't know how to make slide well , but I fInally can make swipper slides! yeah! all thanks to u !! :)

  • @Dhhdhdhduxu
    @Dhhdhdhduxu День назад

    How to make it responsive??

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

    I'm trying to install it as an NPM package and the dependeny can't be resolved... Weird

  • @DB-dk2mj
    @DB-dk2mj 7 месяцев назад

    How to change color of @inkg arrows )

  • @daphinekatushabe6854
    @daphinekatushabe6854 3 года назад +2

    This is what i been looking for, you are really amazing. Thanks for your time and help

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

    Hi , i have swiper with text animation moves up in each slide, but when i change slide the animation doesn't work in other slide ,how can i fix this?

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

    what if you want to do this with an array? .map function?

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

    Whats difference between slidesPerView and slidePerGroup?

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

    💙💙💙💙💙💙💙💙

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

    Thank you, sir, please how can I change the color of a swiper button or pagination.

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

    i think that therse a problem with that swiper when it inside two flex containers ..it work juste at 100% of width ...need some fix

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

    Can you pls help me in getting animate css to work with swiper when slide change caption need to be animated

  • @angelg.velazco73
    @angelg.velazco73 4 года назад +1

    Thanks for made videos like this! it´s very helpful

  • @mauroinde
    @mauroinde 4 года назад +1

    I like your content, I suscribed.
    Is it also working on mobile like responsive?

    • @AdrianTwarog
      @AdrianTwarog  4 года назад

      Yeah can be done with mobile responsive elements

  • @chrisgaze4344
    @chrisgaze4344 4 года назад +1

    Nice video, I have seen a few examples using static content showing a few slides, is it possible to have the slider built with a couple of 100 items, say photos from a json file? Thanks.

  • @edzzz12
    @edzzz12 4 года назад

    Hi. I have a problem with swiper.js on my website. Before slider is working but now it’s not and I cannot find any solution to fix.

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

    Why some people still use owl carousel with jQuery

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

    hi, thanks for the tutuorial! i was struggling how to implement the swiper demos for my assignment. I have one question though, for the javascript, do you not put that into a new text file? all the tutorials i've watched, they've created a new javascript text file and would link it into the index.html. is this not normal? or?

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

    I'm having difficulty inserting my card design to swiper. I'm a complete beginner in front-end. Any help would be appreciated.

  • @merimagdi
    @merimagdi 4 года назад +1

    Thanks for the video! It's very useful. Do you know if swiper is a good tool for responsive design?

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

    hey can you create swipe slideshow without using custom swiper code?

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

    How can I use two slides in a same page with differents properties?

    • @AyaMoukrim-lx2ol
      @AyaMoukrim-lx2ol Месяц назад +1

      has you find the answer because i need this too

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

    Where is the Fade Effects promised in 7:00

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

    Awesome tutorial ++++++++++++++++++ 😃

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

    "Little". bro it's size is 300kb

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

      Bro how do you know how much weigth a framework ? i'm learning so far to use frameworks, ty.

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

      @@jeisongarzon6066 dude jQuery is 240 kb unzipped...

  • @kriskan743
    @kriskan743 4 года назад +1

    thank you very much loved your video

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

    Nice tutorial, how can we make the 3cube move at infinite with time interval of each picture

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

    Nice video!

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

    Hey, i have tried to follow the steps you been doing the whole day but mine doesn't work at all and it shows only one slider. what can i do?

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

    Cam we make a swiper ourselves

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

    what software are you using for coding?

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

    This was so helpful, Tahnk you so much

  • @Andrey-il8rh
    @Andrey-il8rh 4 года назад

    The most versatile slider library available, that's for sure. The only downside is a large size. More than 250Kb of code which has to be parsed by the client browser.

  • @FGA-47
    @FGA-47 2 года назад

    thanks ❤❤

  • @martefact
    @martefact 4 года назад

    doesn't work in IE 11 ???

  • @ThuyHoang-di4hs
    @ThuyHoang-di4hs 2 года назад

    thanks Adrian

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

    Hey great video. One question, if I want to change my content that will be below the slider according to the particular slide it's on respectively, how can I implement that

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

    Thanks for this

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

    Is this responsive one ?

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

    Thank you!!

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

    Thank you so much. This has been of great help to me.

  • @febybasilthankachan761
    @febybasilthankachan761 4 года назад

    hey can we do grid slider in this

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

    Awesome Thank you !

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

    Awesome tutorial , thanks a lot ♥

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

    Awesome tutorial mate. From start to finish you showed it all. Thanks.

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

    Very useful stuff

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

    This one is amazing

  • @alekzrm
    @alekzrm 4 года назад

    crack master

  • @ismailelayade9402
    @ismailelayade9402 4 года назад +1

    Well done mate!

  • @RD-jr8nv
    @RD-jr8nv 3 года назад

    Exactly what I needed!

  • @gabriellenuestro3441
    @gabriellenuestro3441 4 года назад

    Thanks for the tutorial! and can I ask what code editor do you use?

    • @ZyncInteractive
      @ZyncInteractive 4 года назад +1

      Gabrielle Nuestro looks like it’s Brackets editor

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

    Hi great and clear!!