Summary  
This chapter demonstrates how to dynamically generate DOM elements from data arrays and use event-driven programming with state management to implement a carousel featuring navigation controls and image magnification.  

General domain of usage  
Image gallery

<a href="https://www.loom.com/share/c37456c50a4e4beb95c7a8590b95b8ed" target="_blank">Video Instructions</a>

<a href="https://github.com/olehplay/image-carousel-magnifier" target="_blank">github source code</a>

PGxpbmsKICByZWw9InN0eWxlc2hlZXQiCiAgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9iYXNpY2xpZ2h0Ym94QDUuMC40L2Rpc3QvYmFzaWNMaWdodGJveC5taW4uY3NzIgovPgo8bGluawogIHJlbD0ic3R5bGVzaGVldCIKICBocmVmPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzL2MxMDg3MzYzLTkwMjUtNGMzNy04ZDVlLTk4M2EzMmEwMDdlOS9pbWFnZS10b29scy1zZWN0aW9uL2ltYWdlLWNhcm91c2VsJTJCbWFnbmlmaWVyLmNzcyIKLz4KCjxkaXYgY2xhc3M9InNsaWRlci1jb250YWluZXIiPgogIDxkaXYgY2xhc3M9InNsaWRlciI+PC9kaXY+CiAgPGRpdiBjbGFzcz0ic2xpZGVyLWNvbnRyb2xzIj4KICAgIDxidXR0b24gY2xhc3M9ImJ0biBwcmV2LWJ0biIgb25jbGljaz0ibW92ZVRvUHJldlNsaWRlKCkiPiYjODU5Mjs8L2J1dHRvbj4KICAgIDxidXR0b24gY2xhc3M9ImJ0biBuZXh0LWJ0biIgb25jbGljaz0ibW92ZVRvTmV4dFNsaWRlKCkiPiYjODU5NDs8L2J1dHRvbj4KICA8L2Rpdj4KPC9kaXY+Cgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9iYXNpY2xpZ2h0Ym94QDUuMC40L2Rpc3QvYmFzaWNMaWdodGJveC5taW4uanMiPjwvc2NyaXB0Pgo8c2NyaXB0PgogIC8vIENIQU5HRSBUSEUgSU1BR0UgVVJMUyBBTkQgREVTQ1JJUFRJT05TIChERVNDUklQVElPTiBJUyBPUFRJT05BTCkKICBjb25zdCBnYWxsZXJ5SXRlbXMgPSBbCiAgICB7CiAgICAgIGltYWdlOgogICAgICAgICJodHRwczovL2ltYWdlcy50aGVjb252ZXJzYXRpb24uY29tL2ZpbGVzLzQ0MjY3NS9vcmlnaW5hbC9maWxlLTIwMjIwMTI2LTE3LTFpMGc0MDIuanBnP2l4bGliPXJiLTEuMS4wJnE9NDUmYXV0bz1mb3JtYXQmdz0xMzU2Jmg9NjY4JmZpdD1jcm9wIiwKICAgICAgZGVzY3JpcHRpb246ICJ3ZWF0aGVyIHRpbWUgZGVzY3JpcHRpb24iLAogICAgfSwKICAgIHsKICAgICAgaW1hZ2U6CiAgICAgICAgImh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTYxNTQyMzIwLTlhMThjZDM0MDQ2OT9hdXRvPWZvcm1hdCZmaXQ9Y3JvcCZxPTgwJnc9MTAwMCZpeGxpYj1yYi00LjAuMyZpeGlkPU0zd3hNakEzZkRCOE1IeHpaV0Z5WTJoOE1ueDhhM2xwZG54bGJud3dmSHd3Zkh4OE1BJTNEJTNEIiwKICAgICAgZGVzY3JpcHRpb246ICJhcmNoaXRlY3R1cmUiLAogICAgfSwKICAgIHsKICAgICAgaW1hZ2U6CiAgICAgICAgImh0dHBzOi8vY2RuLnBpeGFiYXkuY29tL3Bob3RvLzIwMjMvMTAvMjcvMTgvNDgvbGFuZHNjYXBlLTgzNDYwMTdfMTI4MC5qcGciLAogICAgfSwKICAgIHsKICAgICAgaW1hZ2U6CiAgICAgICAgImh0dHBzOi8vd3d3Lm5hdHVyZS5jb20vaW1tZXJzaXZlL2Q0MTU4Ni0wMjItMDQzNzItMi9hc3NldHMvRkNZeEQwMHRMci90b25nYS1zaC1oLTI1NjB4MTQ0MC5qcGciLAogICAgICBkZXNjcmlwdGlvbjogIm1vb24iLAogICAgfSwKICBdOwo8L3NjcmlwdD4KPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L2ltYWdlLXRvb2xzLXNlY3Rpb24vaW1hZ2UtY2Fyb3VzZWwlMkJtYWduaWZpZXItdjIuanMiPjwvc2NyaXB0Pg==

# If you need the second carousel+magnifier in the same chapter, then use the following code

PGxpbmsKICByZWw9InN0eWxlc2hlZXQiCiAgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9iYXNpY2xpZ2h0Ym94QDUuMC40L2Rpc3QvYmFzaWNMaWdodGJveC5taW4uY3NzIgovPgo8bGluawogIHJlbD0ic3R5bGVzaGVldCIKICBocmVmPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzL2MxMDg3MzYzLTkwMjUtNGMzNy04ZDVlLTk4M2EzMmEwMDdlOS9pbWFnZS10b29scy1zZWN0aW9uL2ltYWdlLWNhcm91c2VsJTJCbWFnbmlmaWVyLXNlY29uZC5jc3MiCi8+Cgo8ZGl2IGNsYXNzPSJjdXN0b20tc2xpZGVyLWNvbnRhaW5lciI+CiAgPGRpdiBjbGFzcz0iY3VzdG9tLXNsaWRlciI+PC9kaXY+CiAgPGRpdiBjbGFzcz0iY3VzdG9tLXNsaWRlci1jb250cm9scyI+CiAgICA8YnV0dG9uCiAgICAgIGNsYXNzPSJjdXN0b20tYnRuIGN1c3RvbS1wcmV2LWJ0biIKICAgICAgb25jbGljaz0ibW92ZVRvUHJldkN1c3RvbVNsaWRlKCkiCiAgICA+CiAgICAgICYjODU5MjsKICAgIDwvYnV0dG9uPgogICAgPGJ1dHRvbgogICAgICBjbGFzcz0iY3VzdG9tLWJ0biBjdXN0b20tbmV4dC1idG4iCiAgICAgIG9uY2xpY2s9Im1vdmVUb05leHRDdXN0b21TbGlkZSgpIgogICAgPgogICAgICAmIzg1OTQ7CiAgICA8L2J1dHRvbj4KICA8L2Rpdj4KPC9kaXY+Cgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9iYXNpY2xpZ2h0Ym94QDUuMC40L2Rpc3QvYmFzaWNMaWdodGJveC5taW4uanMiPjwvc2NyaXB0Pgo8c2NyaXB0PgogIC8vIENIQU5HRSBUSEUgSU1BR0UgVVJMUyBBTkQgREVTQ1JJUFRJT05TIChERVNDUklQVElPTiBJUyBPUFRJT05BTCkKICBjb25zdCBjdXN0b21HYWxsZXJ5SXRlbXMgPSBbCiAgICB7CiAgICAgIGltYWdlOgogICAgICAgICJodHRwczovL2ltYWdlcy50aGVjb252ZXJzYXRpb24uY29tL2ZpbGVzLzQ0MjY3NS9vcmlnaW5hbC9maWxlLTIwMjIwMTI2LTE3LTFpMGc0MDIuanBnP2l4bGliPXJiLTEuMS4wJnE9NDUmYXV0bz1mb3JtYXQmdz0xMzU2Jmg9NjY4JmZpdD1jcm9wIiwKICAgICAgZGVzY3JpcHRpb246ICJ3ZWF0aGVyIHRpbWUgZGVzY3JpcHRpb24iLAogICAgfSwKICAgIHsKICAgICAgaW1hZ2U6CiAgICAgICAgImh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTYxNTQyMzIwLTlhMThjZDM0MDQ2OT9hdXRvPWZvcm1hdCZmaXQ9Y3JvcCZxPTgwJnc9MTAwMCZpeGxpYj1yYi00LjAuMyZpeGlkPU0zd3hNakEzZkRCOE1IeHpaV0Z5WTJoOE1ueDhhM2xwZG54bGJud3dmSHd3Zkh4OE1BJTNEJTNEIiwKICAgICAgZGVzY3JpcHRpb246ICJhcmNoaXRlY3R1cmUiLAogICAgfSwKICAgIHsKICAgICAgaW1hZ2U6CiAgICAgICAgImh0dHBzOi8vY2RuLnBpeGFiYXkuY29tL3Bob3RvLzIwMjMvMTAvMjcvMTgvNDgvbGFuZHNjYXBlLTgzNDYwMTdfMTI4MC5qcGciLAogICAgfSwKICAgIHsKICAgICAgaW1hZ2U6CiAgICAgICAgImh0dHBzOi8vd3d3Lm5hdHVyZS5jb20vaW1tZXJzaXZlL2Q0MTU4Ni0wMjItMDQzNzItMi9hc3NldHMvRkNZeEQwMHRMci90b25nYS1zaC1oLTI1NjB4MTQ0MC5qcGciLAogICAgICBkZXNjcmlwdGlvbjogIm1vb24iLAogICAgfSwKICBdOwo8L3NjcmlwdD4KPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L2ltYWdlLXRvb2xzLXNlY3Rpb24vaW1hZ2UtY2Fyb3VzZWwlMkJtYWduaWZpZXItc2Vjb25kLmpzIj48L3NjcmlwdD4=

This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

+ (deprecated) Image Carousel & Magnifier

Local Source Code

If you need the second carousel+magnifier in the same chapter, then use the following code

Local Source Code