Responsive Slider | Swiper Slider 3D-Coverflow Effect

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

КОМЕНТАРІ •

  • @m3cv1no
    @m3cv1no 2 роки тому +5

    Awesome Job keep up 👍👍🔥🔥

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

      Thank you so much 💖💖

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

      Anytime 😁💖

  • @jesusalberto7723
    @jesusalberto7723 11 днів тому +1

    wow youre slider is so beautiful.

  • @Chekad-k4o
    @Chekad-k4o 4 місяці тому +1

    Thank you bro, your tutorial saved me.

    • @codsfli
      @codsfli  4 місяці тому

      Thanks 🥰

  • @maximboiko3145
    @maximboiko3145 Рік тому +3

    WOW !!! Amazing man! Wish you all the best ! You are best of the best !

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

      Thank you so much ❤️‍🔥❤️‍🔥❤️‍🔥

  • @armaankhan6946
    @armaankhan6946 2 місяці тому +2

    Thanks bruh !❤

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

      Welcome 😍

  • @taofeeqomotolani2311
    @taofeeqomotolani2311 2 роки тому +5

    🔥🔥

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

    Awesome, bro keep up

  • @freemagemarketing1100
    @freemagemarketing1100 2 роки тому +4

    Hola! Se que la pregunta puede ofender un poco pero uso el maquetador de ELEMENTOR, tiene un widget de html donde puedes incluso poner scripts.
    ¿Como podría adaptarse para hacerlo funcional?
    Se qué hay que reemplazar en el código las referencias de la imagen y mover los textos de arriba a la derecha pero en tu documento usas múltiples hojas, pueden concatenarse todas en un pedazo de código?

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

      Thanks for comment. You paste the code in elementor custom code section.

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

      @@codsfli i did it, but there are so many documents and it is litte hard for me to make all in 1 sheet to past in the html widget, finally i could do it but it is causing me trouble.

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

      Bro en que minuto comienza el swiper?

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

      set option interval

  • @arcadan
    @arcadan 6 місяців тому +2

    Very interesting, but i use Next js, would like to see it working there. What are the libs you use to do it?

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

      am also searching on that, if you found something share it with me please

  • @sajidyaqoob1432
    @sajidyaqoob1432 9 місяців тому +1

    20:54 hi brother it help me so much but my question is how can i use it with 3 images???

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

      3 image will be not work, minimum 4

  • @gsi-yy5ei
    @gsi-yy5ei 9 місяців тому +1

    Nice work! Which theme and font family are you using?

    • @codsfli
      @codsfli  9 місяців тому +1

      Martial-theme and
      (cascadia code) font

  • @albertagarunov7154
    @albertagarunov7154 Рік тому +3

    Thanks a lot!!!!!!!!

  • @chickbrandon1915
    @chickbrandon1915 2 роки тому +4

    thanks allot

  • @Agendamento23
    @Agendamento23 2 місяці тому +2

    Nice

  • @erebus-p6i
    @erebus-p6i 3 місяці тому +2

    awesome~~~~

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

      Thanks 😍

  • @topsecretnk2929
    @topsecretnk2929 9 місяців тому +1

    Hi, I was wondering where I can see the "index.html" file from the video for the source code. I could not find it on the Github page

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

    bro , i want to make it so that when a certain slide is clicked , that one comes into the center , can you help me out how i can do that?

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

      contact me in messenger.

  • @rubicon868
    @rubicon868 Рік тому +5

    Friend, tell me what you need to add to your code so that the slider can scroll itself with an interval of 5 seconds?

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

      add inside swiper option :
      autoplay: {
      delay: 5000,
      disableOnInteraction: false,
      },

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

      @codsfli where is this swiper option?

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

      Slider script inside

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

    Vi que respondiste un comentario de cómo ponerle tiempo para que se deslice automáticamente, pero al dar clic en alguna flecha el tiempo para deslizar automáticamente ya no lo respeta, ¿Hay una manera de poder hacer que aunque se dé clic siga respetando el tiempo?

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

      I give previously that code {options} has some issues {github.com/nolimits4web/swiper/issues/3729}.
      I think this code fixes that problem 👇
      * autoplay: {
      delay: 2000,
      disableOnInteraction: false,
      }*
      Thanks for your comment 👍.

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

    Nyc mind blowing

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

      Thanks 🔥

  • @Eve依宸
    @Eve依宸 9 місяців тому +1

    How can I move the arrow buttons to the middle right and left side?

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

      Write CSS

    • @Eve依宸
      @Eve依宸 9 місяців тому

      @@codsfli Which class of the arrow belong to , I can't find it

    • @worldwildlife-c
      @worldwildlife-c 8 місяців тому

      @@Eve依宸 give class to arrow then apply css on it

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

    Hello, I saw that you reply to the comments, can you help me?
    I would like to leave only the main card with opacity 1 and the others that are smaller than it with opacity 0.5, how can I do that?

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

      Thanks for comment 👍
      .swiper-slide {
      opacity: 0.5;
      }
      .swiper-slide-active {
      opacity: 1;
      }

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

      Thanks!

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

    I coded along but couldn't get it to work. Bummer.

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

      See if you missed anything, or Check swiper documentation.

  • @xash6917
    @xash6917 Рік тому +5

    can you make this slider in reactjs

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

      Okay I will try.

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

      @@codsfli thanks for replying

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

      @@codsfli Yes, please. It is gonna be awesome! ReactJS

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

      today i publish React JS way , wait.

  • @FunPractice723
    @FunPractice723 Місяць тому +1

    Thanks bro

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

    thanks👍👍

  • @ersakhan3820
    @ersakhan3820 3 місяці тому +1

    thanku 😇😇

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

      Thanks 😍

  • @arupbiswas1949
    @arupbiswas1949 7 місяців тому +2

    How can I download source code..? I can't download from git-hub.. Because download button is not showing..

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

      I think Github problem 🤔

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

      if u see the green button with text " Code" click it then choose download zip

  • @ParasProgramming123
    @ParasProgramming123 Рік тому +4

    if i have to make this clickable what do i do

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

    Hello bro we are into pancakes business and we are making [make your own ice cream and pancake] where the backend people have stuck in looking for a code please help me with this....,The problem they are facing is that there is a list of ice cream flavors in the left side section and empty ice cream cup in the right side of desktop screen... once you select on the image of a single ice cream scoop flavor it should appear in the empty ice cream cup which is not happening please guide us.
    ONLY TWO SCOOPS OF ICE CREAM FLAVORS IN CUP AT A TIME THAT IS ONLY TWO IMAGES SHOULD APPEAR.

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

      How can I help you, message me.

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

      @@codsfli There is a interface image of make your own ice cream section...how can i share you that..? i think you'll understand the problem once you look at the image.

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

      visit : codsfli.com/
      you will find my contact info.

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

      @@codsfli Bro please check your mail

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

    How to add database in this project? so that we can update this in real time.

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

      Use json file or third-party database

  • @MahdiBehrooz
    @MahdiBehrooz Місяць тому +1

    How can we use this in WordPress and Elementor?

    • @codsfli
      @codsfli  Місяць тому

      Everything in one file then you can use

    • @MahdiBehrooz
      @MahdiBehrooz Місяць тому

      @codsfli Do you have a Telegram or Instagram or WhatsApp ID so I can send you a message and ask for your help?

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

    hello, a little bit confuse.. to make it smaller, what should I do?

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

      Hey there! Don't stress, I got your back. Let's tackle this confusion and make it smaller!

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

    Bro html page lo scripts links vati code important or not if important the code of that script I can't find can you help me

  • @АртемКамальтдинов

    🔥

  • @praveen.s7333
    @praveen.s7333 Рік тому +1

    What are these,

    • @praveen.s7333
      @praveen.s7333 Рік тому +1

      1:46

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

      That script is the cdn link for the Swiper plugin.

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

    Hi, I used your code in angular, but I am not getting 3D coverflower effect. I am getting output in image sliding in straight line.
    I want to change the image using slider. Could you please give solution ?

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

      I am sorry, swiper not much work in angular. you can use another plugin.

  • @williechristen7239
    @williechristen7239 Місяць тому

    Can this work with bootstrap

    • @codsfli
      @codsfli  Місяць тому

      I think it will be work

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

    Hey, your video was really helpful! I want to ask how to change it to autoplay.

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

      autoplay : true,

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

      @@codsfli where exactly? Html, css or js?

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

      Javascript swiper object inside

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

    will this work for svelte?

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

    Thanks ,code source please

  • @zhamshidkaliev
    @zhamshidkaliev Рік тому +4

    Whata mess in html

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

      What?

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

      @@codsfli learn BEM html

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

      @@codsfli i downloaded your github source and archiv do not wanna open1

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

      I think not downloaded 🤔

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

    why do you guys always use .html I don't see the point of it cause if I try to add this carousel to my work the.HTML will ruin my design and will make everything look big

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

      I don't know what you mean

    • @sire906
      @sire906 11 місяців тому

      @@codsfli on your css code there’s what you wrote .html and you added font size to it and the zoom element so all I’m trying to say is those codes are not needed it ruins peoples formal code

    • @AfrojaKhatun-h1m
      @AfrojaKhatun-h1m 11 місяців тому

      You dont know csss😂😂😂

    • @Furiossa.
      @Furiossa. 11 місяців тому +7

      How hard it is to write it on your own using this video as a reference, instead of just doing blind copy paste and complaining that it doesnt fit your design....What did you expect from him? To write it specifically for your needs...