I'm happy to hear that! 🥰 Seeing such nice comments motivates me to create more content. Thanks for your comment 🙏🏻

The slider speed is fixed and isn't based on the number of slides. I set the speed to 6.5 seconds in this tutorial, meaning the transition between slides takes that amount of time, regardless of how many slides are present. But if you'd like to speed up or slow down the slider, you can set the speed option in the JavaScript code.

Thanks a lot🤩💜

Did you add external resources and choose Babel? You can use the global Swiper object like you create it in HTML, CSS, and JS because you can't use the import syntax in CodePen directly. In addition to that, you need to modify your codes.

Thank you so much! 😊💜

I'm glad to hear that 🥰 Thank you!

Thank you so much! 🤗

Önce neler yapabileceğimi araştırmam, ardından da orijinal bir içerik oluşturmam gerekiyor. Biraz zaman alabilir, ama tabii ki neden olmasın.

@@ecemgokdogan heyecan ile bekliyoruz

@@ecemgokdogan ya bu arada bu projeniz hoşuma gitti de reacta çevirmey çalışıyorum hata alıyorum

React'a uyarlayacağım ama birebir aynısı olmayacak maalesef. RU-vid aynı içeriklerde biraz problem çıkartabiliyor, biraz değiştirip geliştireceğim. Yalnız ne zaman hazırlarım ve çekerim bilemiyorum. Bir projeyi düşünmem, yaratmam ve RU-vid'a hazırlamam en iyi ihtimalle 1 haftamı alıyor. :) Gelecek hafta, react ile bir içerik istendi onu hazırlıyorum, belki sonraki hafta bunun React versiyonu gelir.

Thank you so much! 🥰

I'm glad to hear that 😌

@@ecemgokdogan i already use swipperjs but i don't make effect like that, it's beatiful. Keep going and see you next time

Thank you for your kind words! 🌟 I'm really glad the video worked for you. I'll upload more creative content like this! 😊 👩🏼‍💻

@@ecemgokdogan subscribed for future creative videos 👍🏻

Thank you, Taherr! 🍀 I'll upload a content made with the Swiper React components in 2 weeks. I hope it's useful. By the way, I'm always open to your suggestions 🌟

Ricardo, it's a surprise to see your comment here🌟😀 Thank you so much! 🤗💃

Thank you so much, Ömer 😌🍀

You can add "loop: true" where the swiper functions are.

Thank you so much! I'm glad you liked it! 😊

Thanks a lot 🤩

Actually, Swiper JS is designed to handle slides of the same size so when you increase the size of an active slide, it may not be centered automatically. I usually adjust it by trying. In this project, when I set the width of the active slide from "300px" to "400px", it was not centered exactly as you said. It works a little if you set "freemode" to "true" in Javascript. Btw, freemode provides slides with a more fluid and natural scrolling experience. I have a project about swiper freemode, I'll upload it soon after developing it a bit.

@@ecemgokdogan so i was trying to center the active slide using some stuff. i tried slidesOffsetBefore and After it was partially working. you can try this. and then i did document.addEventListener("DOMContentLoaded", () => { let swiper; setTimeout(() => { swiper = new Swiper(".swiper", { grabCursor: true, initialSlide: 4, centeredSlides: true, spaceBetween: 45, freeMode: false, loop: true, slidesPerView: "auto", slideToClickedSlide: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, autoplay: { delay: 3000, disableOnInteraction: false, }, }); function adjustWrapperSpacing(direction) { const wrapper = document.querySelector(".swiper-wrapper"); if (direction === "next") { wrapper.style.marginRight = "80px"; wrapper.style.marginLeft = "20px"; } else if (direction === "prev") { wrapper.style.marginLeft = "-20px"; wrapper.style.marginRight = "0px"; } } document .querySelector(".swiper-button-next") .addEventListener("click", () => { adjustWrapperSpacing("next"); }); document .querySelector(".swiper-button-prev") .addEventListener("click", () => { adjustWrapperSpacing("prev"); }); swiper.on("slideChange", () => { const direction = swiper.previousIndex < swiper.activeIndex ? "next" : "prev"; adjustWrapperSpacing(direction); }); }, 100); }); you can adjust the margin values to manually center the slides it works for me. the only drawback i found is that it wouldnt work for the initial load. i am thinking of leaving it like that or just switching to second slide as soon as it loads. i will try to make the transition a bit smooth as well. hope it works for you.

@@prakhar3230 Your solution works. I think, in such cases, manually adjusting margin values ​​is a wise method. 🚀

I'm glad you liked the video, I hope it was useful ☺️ I understand that you want immediate access to the source codes. The codes of my many projects are already available on my Github and Codepen profiles. However, some of them are not there because they are RU-vid-exclusive content. If I share the source codes, the videos will not be watched, and if they are not watched, I will not be able to produce content for you. For one video, it takes me about 5-6 days to search for what I'll do, create new and original content, record and edit video, and share it with you. Moreover, what I share with you is completely free content. I don't even make money from RU-vid myself. That's why accessing the source codes directly seems like disrespect to all these efforts.

@@ecemgokdogan i didnt think of that. i am sorry i didnt mean to disrespect your hard work. these are good videos.. i hope you keep making them. and yes i did find the one i was looking for on your codepen . its a big help for me. i made a custom slider using js which was jittering due to too much dom manipulation so thats why i looked into swiper. i couldnt understand it , thats when i found your channel. it was pretty easy to grasp. i also learned about particle js. so i hope you keep making these videos . they are a big help to many people like me. this is a selfish plea of mine but it would be helpful if you could make videos on similar components like navbar toggle menu etc. also i saw dictionary with dark mode in your repo i might implement dark mode from that. thanks. and keep up the great work.!

Thank you so much for your kind words and support! 🙏 I'm really glad to hear that my videos and codes have been helpful to you! By the way, no need to apologize at all- I stated the situation in general. Please don't take offense. I'm always open to suggestions. I'm thrilled to hear that you're interested in more content like navbar toggles and other components. I’ll definitely keep that in mind for future videos! 🤗 Happy coding! 🚀

🥰🥰

Thank you so much! 🥰

Thank you!🤗 Sure, you can use it for non-commercial purposes. However, if you completely change the codes and images, I'll allow it to be used commercially.

Thank youu! 🥰 I'm happy to hear that you enjoy the visuals and interactions. Your support and feedback mean a lot to me😌

I'm glad you liked it. In this video, I divided the Javascript into two parts; the main features of a slider and adding animation to the background. Did you watch the whole video? Since I can't see your code, I don't know what causes the problem.

I'm glad you find it helpful. Your support means a lot. Thank you!

Thank you for following my channel and being interested in my works. How fair would it be for someone else to sell my projects and make money while I share them for free? That's why I never allow others to sell my projects. You can only use them for your landing page or share them by giving credit to me in a non-profit project. I'm spending serious effort and time on these projects without any gain, so I was hoping you could respect this issue. Thank you, again!

​@@ecemgokdogan I understand your point of view and will respect your wishes, which I fully understand. Thank you for your reply.

Thank you for your understanding and respect for my efforts.

You can reach this slider, made using Swiper React components and restyled here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Q2-5Sz_eA3k.html

I used the "width: 100%; aspect-ratio: 3/2; object-fit: cover;" for the images in this slider. "object-fit" helps to resize to fit its container. Instead of using "aspect-ratio", you can give max-width and height to the images but they are responsive if you use "aspect-ratio".

@@ecemgokdogan Reassigned the default width like this: .swiper-slide { width: unset !important; } And everything works!

Thank you for sharing your solution!🌟

var swiper = new Swiper(".swiper", {}) is an existing function of Swiper JS. So, this function will not work with "let". If the "multicolor" means gradient, you cannot make particles gradient because Particles JS does not have such a feature. But if you say you want to use different colors for particles, you can watch my "Coverflow Effect Slider" video.

Thank you for your kind comment!🙏🤗