Build A Bootstrap Carousel Without Bootstrap - HTML, CSS & JavaScript Tutorial

Опубликовано: 02 Февраль 2025
на канале: Qixotl LFC

2,810

In this video you will lean how to create a convincing replica of the Bootstrap carousel from scratch. This means you will create an image slider which emulates the look and feel of the real Bootstrap carousel, with the benefit of not having to import the Bootstrap CDN which can add unnecessary bloating to your project and mess with the pre-existing styling already on your website. This will be created entirely with the vanilla tools of HTML, CSS and JavaScript. So, no frameworks, icon packs, jQuery, and of course no Bootstrap.

📚 Materials/References:

CodePen Project Page: https://codepen.io/LFCProductions/pen...
Open Sans Font. Hosted by Google: https://fonts.google.com/specimen/Ope...
VSCode Live Server Extension: https://ritwickdey.github.io/vscode-l...

🧠 Concepts Covered:

How to mask images in CSS with the overflow property.
Complex DOM management to meet the demands of a smoothly animated image slider which will restart its line up of images if the user scrolls past all of the images in one direction.
How to manage CSS animations using JavaScript.
How to create custom HTML attributes by assigning them logic in the JavaScript file.
How to repeat the calling of a function after a consecutive period of time using the setInterval method in JavaScript.

💻 Technologies used:

-JavaScript (No jQuery)
HTML
CSS (We use css animations instead of doing the animations in JavaScript)

If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.

Stay awesome guys. Peace and love. ☮️❤️

KEYWORDS

qixotl_lfc,Qixotl,LFC,web dev,Bootstrap,Create Bootstrap Carousel without Bootstrap,image carousel html css javascript,bootstrap tutorial for beginners,bootstrap without bootstrap,image slider dev ed,image slider bootstrap from scratch,create bootstrap yourself,create bootstrap from scratch,image carousel no boostrap,image slider no bootstrap,no bootstrap or css framework,image slider css javascript,css animation image moving,css animation image slideshow,java