How To Make Animated Testimonial Slider For Website Using HTML CSS & JavaScript

Подписаться 1 млн

Просмотров 20 тыс.

50% 1

Learn How To Make Animated Testimonial Slider For Website Using HTML CSS & JavaScript | Create Review Slider Using HTML CSS and JavaScript
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will create testimonial slider where it will display the user's image, review text and user's name. When we will click on another reviewers image then it will change the review text with some animation. We will make this website design using HTML, CSS and JavaScript.
Download Image: drive.google.com/file/d/17tCg...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Опубликовано:

29 июл 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@samialvi4226 Год назад

Man, you are doing an osm job. Can you make a playlist on beginner-friendly projects of Js, it will help us a lot. Thanks!!!

@aurianengr Год назад

this was super useful and easy thank you

@FaraidunHussain Год назад

Master ,Thanks

@Gamer_Guy2.0 6 месяцев назад

great video, really helpful

@vedantvora04 2 года назад

Hey dude can u help out by making a javascript detail video

@basabishome4118 Год назад

Nice one

@mrcandie Год назад

Dope 🔥🔥🔥🔥

@uodige1 Год назад

Hi, thank you for your tutorial. I have a question on your tutorial, How come I don't get to the link image from fontawesome link even though I copied the image link from it?

@wahidaelyakoubi4991 5 месяцев назад

Thank yku sooooooo much

@Medsacollection 2 года назад

Awesome I complete in one house perfectly 🥰

@GreatStackDev 2 года назад

That is awesome!

@hiwotina26 2 года назад

Please do javascript tutorial as well.

@InfoElecmathic 2 года назад

well. Can you create a dashboard in the next video? thanks.

@Medsacollection 2 года назад

Waiting for more interesting vedios

@GreatStackDev 2 года назад

Sure 😊 I will be making more video like this. Check out my latest tutorial to add song on the website: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ftjZI4mLCoI.html

@hasarasankalpa3503 2 года назад

Super bro

@GreatStackDev 2 года назад

Thanks Hasara, Glad you like this website testimonial design tutorial

@khavovan8201 2 года назад

Good lesson, but can you split the screen, code and browser? That makes it easy to follow. Thanks

@GreatStackDev 2 года назад

Thanks, but in this case I will get less space for text editor and I need to keep the font size small. People watching this video in less resolution can't read it.

@tobitacklestech 2 года назад

Which theme are u using? It looks pretty nice

@GreatStackDev 2 года назад

brackets

@faizatchouar3473 Год назад

Hello , Greaat !! How can we let the visitors enter there reviews and when they click OK it will appear as your design ?

@abdulahadgazi8451 2 года назад

Beautiful tutorial sir

@GreatStackDev 2 года назад

Glad you like this website testimonial design tutorial, thanks for your comment

@abdulahadgazi8451 2 года назад

@@GreatStackDev thank you so much

@Deus-lo-Vuilt 2 года назад

thanks bro

@GreatStackDev 2 года назад

Glad you like this website testimonial design tutorial, thanks for your comment

@dekinphaisal1925 2 года назад

Hello, Can you make a cargo shipment tracking page design ? please

@gamingbar54 2 года назад

First Hi Your From India

@GreatStackDev 2 года назад

Thank you!!

@gamingbar54 2 года назад

@@GreatStackDev Brother your from India

@GreatStackDev 2 года назад

yes

@hasarasankalpa3503 2 года назад

Please get a js project tutorial

@GreatStackDev 2 года назад

here is the JavaScript project video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XZSQyIenYlk.html

@subhronilchoudhury1873 Год назад

The event is deprecated, what do i use instead

@rishikant2469 2 года назад

Sir, pls make a video on sign up responsive page

@GreatStackDev 2 года назад

please checkout this tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-L5WWrGMsnpw.html

@shanii-hs6lq 11 месяцев назад

responsive b hai k ni

@salomeedalmeida5602 2 года назад

Hello there! Can you make a 3 dimensional website with 3d shapes

@GreatStackDev 2 года назад

I don't know to make that

@salomeedalmeida5602 2 года назад

@purysystempurisystem8811 Год назад

how can i make it responsive would you help me

@GreatStackDev Год назад

use CSS media query, I have show CSS media query in this full responsive website design tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0YFrGy_mzjY.html

@salomeedalmeida5602 2 года назад

And also make a complete website like Brian design will do

@salomeedalmeida5602 2 года назад

Then I can tell you that you are a pro program and the best

@GreatStackDev 2 года назад

No Salomee, I m beginner like you

@salomeedalmeida5602 2 года назад

@romanstrazanec Год назад

I stucked on 7:32 after adding display: none , the class name active-text dont work for me can someone help?

@romanstrazanec Год назад

here is my html and css

@romanstrazanec Год назад

Testimonial 001 Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. John Doe1, CEO 002 Lorem ipsum dolor sit amet, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. John Doe2, CEO 003 Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. John Doe3, CEO 005 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. John Doe5, CEO 006 Lorem, consetetur sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. John Doe6, CEO let userTexts = document.getElementsByClassName("user-text") let userPics = document.getElementsByClassName("user-pic") function showReview(){ for(userPic of userPics){ userPic.classlist.remove("active-pic"); } for(userText of userTexts){ userText,classlist.remove("active-text"); } let i = Array.from(userPics).indexOf(EventTarget); userPics[i].classList.add("active-pic"); userTexts[i].classList.add("active-text"); }

@salomeedalmeida5602 2 года назад

teach me to make one delivery website

@salomeedalmeida5602 2 года назад

grocery's