Responsive Touch Slider Using Html CSS & Swiper.js | 3D Responsive Slider 2
HTML-код
- Опубликовано: 4 окт 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Previous Work : Responsive Touch Slider Using Html CSS & Swiper.js - 3D Responsive Slider Using Swiper.js
Watch This : • Responsive Touch Slide...
Swiper.js : swiperjs.com/
------------------
Patreon : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutor...
Yo!!! Hey YOU ARE REALLY AWESOME!!! Nobody on RUclips platform makes this kinda content, NOBODY!!! You are a semidgood of design... I wanna thanks you for all this. Thanks so much. Wherever you are, my greatest admiration for your work. You are really innovative in what you do and you deserve much more than what you have ... Many more people should learn more about you and the immense work that exists behind your channel. Thanks again.
Grettings and please take care yourself in these hard times.
Thank you so much 😀 I appreciate it
I didn’t feel to comment. But I did. Good Job btw :)
Please take note the slider name has been changed to Effect Coverflow.
THANK YOU JESUS I WAS GOING CRAZY
How about carousel responsive but 1 only image can see. Like that but if going to phone just only 1 image and have pagination.
It's hard for me to say this, but this specific backing track is growing on me. xD
Thank you so much for all your videos, by the way. I've learnt a lot, and I always feel compelled to give your videos a like. :)
Glad you like them!
Bro i'm from Afghanistan. i see most of your video !that's awesome
Bro,make a form that connects to our email.Which means when the user clicks the submit button .The text which is in the form will directly send it to our email(developer email addres)
Ok...i have a script...i'll share that on our channel in coming videos...
This is awesome
Thank you so much! This tutorial was great. I slowed the playback to 1.25 speed and followed along nicely! Your work is appreciated!
That's an increase in speed, not a decrease...
Brother i recommend u make two videos. One with a voice and one without the voice for the same job. Profit double and people can choose
thank you sir
this video is very helpful
Sir you are great, this video was very helpful.
The only thing is, it worked for me when I used max-width instead of width.
Simply awesome... really. the way that you show the simplicity action to build your tuts, it's a pure masterpiece!
Mad respect for you bro! you got a new Patreon btw :D
Thanks bro 😁
Hi my online friend ~~~~~~> awesome, amazing and fantastic...............
www.onlinetutorialsweb.com/ this website is not my mobile and laptop........... This website is empty......!!! Why?
Which country are you lived?
Why you website can't open please try to answer i am waiting for you reply please tell me about it............?
Please read the my massage try to answer.......
this is a great demonstration, however, what code do I need to add in order to control the scroll with the arrow keys too?
How can I set width for swiper-slide? I have tried it on my css but it didn't work
rlly thank you
Thanks for this swipe.js, hopefully we can practice new things !
You are such a genius....😍😍😍
excellent content, I bought your course from udemy, thank you very much !!!
Brother its not working....the width & height we setting for .swipe slide is changed....while seeing our output??? 🤷♂️🤷♂️🤷♂️
It was exactly what i needed.ZajakAllah.
excelente video! solo una duda... como saber cual div se encuentra en uso? para desplegar información acorde al div que aparece al frente
Swiper style sheet and js CDN links have changed, and even after updating them, it's not working similar to the video :(
Ok after updating the CDN links and changing slidesPerView(in js part) from auto to 3 or 4 , it's works as shown in the video.
I also made a few changes in css as well,
In the swipe-container class I defined height to 50vh , since the screen was empty untill I made this change in css
Bro imges r not working properly, the img size is not getting fixed like ur
PLease help its not working for me it says Swiper is not defined
Update the CDN links, the ones shown in video are outdated.
And also
Change sliderPerView from auto to 3 or 4 in script part
And define height of slider-container class in css part, I put it to 50vh.
@@11111111175890 ty for the answer. I'll try it
Sir you are incredibly good at web development . I would like to see some more voice over videos.
Usefull content as always , keep these videos comming 🤩
thanks bro
Está genial, este slider lo agregué. Aún theme de wordpress
Amazing 😄 I must start learning jQuerys
Theee best maahhh iniii...
There is a problem, when transitioning the box-reflect disappears for a second. Is there a way to fix this? In your video it doesn't have that problem so did they change something in the code?
Awesome video, thanks a ton and subscribed
Mil gracias, sos grande y unico, saludos desde Perú
your are amazing sir.
really nice work brother.
with your help i have created the same carousel for videos and it worked great. I want to add some more functionalities in it. I want to play focus video only and rest should pause and blur. please help me out in this .
My only question is that how do we change the hieght and width of the images inserted for a particular ratio????
it's great, thank you
How to make a backend using firebase 🔥 for this loop slider?
What I meant, is that when adding/creating new content on the Firebase , it should be reflected on a new slide that has to be added at the end... And so on... It looks pretty hard to make that! :(
I am eagerly waiting for your reply dude! :) @DarkCode
good job
great work , very helpful ❣❣❣ thanks :)
My curtain navigation bar stopped working when I made this slider. How can I fix it?
Thank you
Ultimate
when i am adding swiper.js my total design is changing. plz tell me what to do
loved your work bro....
wow tahnks you so much you are the best
Glad it helped
When I first did it it was working completely fine .....after few days it has stopped working. I did even touch the codes . Everything was same. I am doing everything same exactly the third tym still its not working the pagination.
mine is not reflecting :(
Change sliderPerView from auto to 3 or 4 in script part
And define height of slider-container class in css part, I put it to 50vh.
thanks you! can i minimize the swiper code?
Uhm, quicky question. Is it possible to enter text at the top or the bottom of the picture? If yes, how could I do it?
you can add anything in "swiper-slide" box .... watch This ruclips.net/video/kw1wnvWjgCw/видео.html
@@OnlineTutorialsYT Thank you so much. I got it working. You my guy are a king. 👑
how to adjust image size
Excuseme , i tried to add all the code my index.html , but i cant see the slider .. why ? but if a create a new file , i can see everithyng :/
Merci pour le tuto
Thanks for everything, love from Indonesia
nyc video tutorial
My images did not fit into the box. How can I fix it?
dude , great vid tbh..The images are not being in the slide ?
Any help ? thanks
everything works perfectly but now my branding logo is behind the slider it's not showing =/
gj bro ^6 thx
-webkit-box-reflect: below; property not working in bootstrap studio. Please tell a solution
Problems if I use this slider for client website ?
Images not show properly . What is the image size
Please do this on onscroll effect if possible (not using magicscroll js bcz it's paid 😅)
Really good work!! I've a small issue. I build this project with text in it (like testimonial cards). Everything works damn fine. Only the text is kinda blurry? Have u or anyone an idea what i can do to fix it??
Do you have anything done with A-Frame (WebVR) and d3.js?
hii nice tutorial .... can i add text also ? just below or above the image
Idk why but I can't do ittt, I promise that I do everything that u do and check the codes but it just show a black line :cc
fantastic
Isn't there a way to make that side effect without using swipe.js?
Yes many ways
I did same with materialize ruclips.net/video/k12bQFtSTAY/видео.html
Or if you know javascript then code it
@@OnlineTutorialsYT i dont know how to code it in javascipt. Can you teach me
@Dark Code oh ok
Hello sir, how to use image in html select in bootstrap? Not using any custom css. Please give me solution
Sir it's working fine if i copy the code in a different page but it's not working when i copy the code on my actual page.. somebody please help in this..
this style responsive with mobile view? sorry my English language so bad.
Hi @OnlineTutorials4Designers, I'm trying to use this slider with the glassmorphism effect, using backdrop-filter... but the filter goes away after I release the mouse, and it comes back after the movement is completed.... do you know a workaround to this? I've tried contacting swiper but they say the issue is not related to the library.
I loved it :) :) :)
Thanx......
Bonjour, j'ai un petit souci avec le responsive. Mon image centrale reste à taille fixe et le slider n'est plus du tout fonctionnel en-dessous de 500px de taille d'écran. Comment doit-on faire pour réduire la proportion du slider vu que certaines width sont en dur? Merci encore pour ces supers tutos en tout cas!
I still have the issues, even I used the loop property, its just broken
This is the video I'm looking for loop and autoplay thank sir
I'm also trying to add two sliders in the same page but I'm to be able to add in a proper way, please make a video on this.
Glad it helped
make duplicate html code and also javascript....then just change class name of 2nd slider "swiper-container to swiper-container2" then
write script for 2nd slider like this
var swiper = new Swiper('.swiper-container2', {
***************
});
@@OnlineTutorialsYT Thank you, sir
@@OnlineTutorialsYT facing problem...the screen automatically become wide
can you please tell how to add people's names above this slider
Is it possible to use this slide for Shopify product photos?
Do you guys know if i can integrate this code to shopify?
bhai bhagwan ho tum designing k mamle me
How to implement that in modal in pure JS?
-webkit-box-reflect not working..
nice
Sir why don't you Add voice.Its Hard to understand why Do you use a Specific Tag.
How to make a sorting system bro I just saw it on website called Pottermore
img Hover water effects video tutorials bna sir g plz
madness.
Can u teach bootstrap 4?
Hi ! iam new in dev , is it okey to steal codes xD ? (whene someone cant code it)
no me da al usar el -webkit-box-reflect :c
Can you make a content about blogspot jQuery styling?
GITHUB BROOO
Nice video :)
👍
Bhai swiper js ka use kr ke menu bnao jaise mobile me hota hai
aur hai side menu nhi full header menu
Thanks in advance
Wow...nice idea...thanks
@@OnlineTutorialsYT 😊😊
Aise hi ideas dete raho bhai...mai banane ka try karunga :)
@@OnlineTutorialsYT jaroor bhai