Tutorial - Using the Bootstrap 5 Image Carousel with HUGO the static site generator | Front End Dev



Published
This video is all about how to implement the Bootstrap 5 Image Carousel with Hugo. I cover accessing page resource images, iterating over them, and how to resize all of the images so that they are the same aspect ratio for the Carousel.

You can use your own project, or use mine via the links below.

Watch my full length Hugo courses on skillshare here: https://www.skillshare.com/r/user/sean_emerson?gr_tch_ref=on&gr_trp=off
You get 1 month free, to watch my courses using my referral link.

Full length HUGO and Bootstrap 5 intro course
https://skl.sh/3rsfq4y

Full length SASS/SCSS building with Hugo Course
https://skl.sh/3IKdWc2

Full length JavaScript building with Hugo Course
https://skl.sh/3uHZcEz

SEO and asset optimisation with Hugo Course
https://skl.sh/3rthbOo

Looking for the best value for money travel insurance that suits both travellers and digital nomads? Covid-19 coverage included! Use my link to support this channel.
https://safetywing.com/nomad-insurance?referenceID=24741702&utm_source=24741702&utm_medium=Ambassador

Like the video? Buy me a cofee!!
https://www.buymeacoffee.com/futureweb

Code to get started
https://github.com/future-wd/video-hugo-bootstrap-carousel/tree/start_here

Code of completed video
https://github.com/future-wd/video-hugo-bootstrap-carousel

Docs:
https://getbootstrap.com/docs/5.1/components/carousel/
https://gohugo.io/templates/introduction/#example-3-declaring-variable-names-for-an-array-elements-index-_and_-value

VIDEO - Installing Hugo on windows https://youtu.be/l7PHRA8t4Bw

PLAYLIST - My other HUGO videos https://www.youtube.com/watch?v=sX1_R11wuxk&list=PLE92IfveVXuXTOjdPM_nleN6Cga_d3uJ-

0:00 - Introduction


#hugo #website #staticsite #staticsitegenerator #jamstack
Category
Web design
Be the first to comment