{"id":105616,"date":"2024-12-06T19:44:25","date_gmt":"2024-12-06T18:44:25","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=105616"},"modified":"2024-12-06T20:08:36","modified_gmt":"2024-12-06T19:08:36","slug":"image-carousel-justified-images","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/image-carousel-justified-images\/","title":{"rendered":"image carousel justified images"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"105616\" class=\"elementor elementor-105616\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b1bf265 e-flex e-con-boxed e-con e-parent\" data-id=\"b1bf265\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b6aaa4 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"1b6aaa4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;3&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2024\/10\/cave-exploring.jpg\" alt=\"cave-exploring\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2024\/02\/desktop-computer.png\" alt=\"desktop-computer\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2023\/08\/LC_250_19c.webp\" alt=\"LC_250_19c\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2023\/08\/Mask-group-in145-231x367-1.jpg\" alt=\"Mask-group-in145-231x367\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2023\/08\/bold-riders-crew-homepage-hero-260523_2049087.jpg\" alt=\"bold-riders-crew-homepage-hero-260523_2049087\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2023\/08\/ebox.jpeg\" alt=\"ebox\" \/><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"7 of 7\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/franktielemans.be\/blog\/wp-content\/uploads\/2023\/03\/cover-10-golden-rules-of-magazine-flipsnack-cover-design.jpg\" alt=\"cover-10-golden-rules-of-magazine-flipsnack-cover-design\" \/><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-left\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-right\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-94ea1dd e-flex e-con-boxed e-con e-parent\" data-id=\"94ea1dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-535f404 elementor-widget elementor-widget-html\" data-id=\"535f404\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    \r\n    <script src=\"https:\/\/unpkg.com\/swiper\/swiper-bundle.min.js\"><\/script>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    \/\/ Initialiseer Swiper na het laden van de DOM\r\n    var swiper = new Swiper('.elementor-image-carousel .swiper-container', {\r\n        slidesPerView: 'auto',       \/\/ Zorgt ervoor dat elke afbeelding zijn eigen breedte behoudt\r\n        spaceBetween: 30,            \/\/ Ruimte tussen de slides\r\n        centeredSlides: true,        \/\/ Zorgt ervoor dat de actieve afbeelding centraal staat\r\n        loop: true,                  \/\/ Zorgt ervoor dat de carousel blijft herhalen\r\n        slideToClickedSlide: true,   \/\/ Zorgt ervoor dat de juiste slide wordt geselecteerd bij klikken\r\n        observer: true,              \/\/ Houdt Swiper up-to-date bij DOM-wijzigingen\r\n        observeParents: true,        \/\/ Houdt Swiper up-to-date bij wijzigingen in de oudercontainer\r\n    });\r\n\r\n    \/\/ Functie om de breedte van elke slide dynamisch in te stellen op basis van de afbeelding\r\n    function adjustSlideWidths() {\r\n        var slides = document.querySelectorAll('.elementor-image-carousel .swiper-slide');\r\n        slides.forEach(function(slide) {\r\n            var img = slide.querySelector('img');\r\n            if (img) {\r\n                var imageWidth = img.naturalWidth; \/\/ Gebruik de werkelijke breedte van de afbeelding\r\n                slide.style.width = imageWidth + 'px'; \/\/ Stel de breedte van de slide in op basis van de afbeelding\r\n            }\r\n        });\r\n    }\r\n\r\n    \/\/ Wacht totdat de afbeeldingen geladen zijn en pas de breedte aan\r\n    var images = document.querySelectorAll('.elementor-image-carousel img');\r\n    var imagesLoaded = 0;\r\n    images.forEach(function(img) {\r\n        img.onload = function() {\r\n            imagesLoaded++;\r\n            if (imagesLoaded === images.length) {\r\n                \/\/ Pas de breedte van de slides aan zodra alle afbeeldingen zijn geladen\r\n                adjustSlideWidths();\r\n                swiper.update();  \/\/ Herlaad Swiper om de nieuwe breedte correct toe te passen\r\n            }\r\n        };\r\n    });\r\n\r\n    \/\/ Pas de breedte van de slides aan bij het laden van de pagina\r\n    adjustSlideWidths();\r\n});\r\n\r\n<\/script>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-105616","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/comments?post=105616"}],"version-history":[{"count":0,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105616\/revisions"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=105616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=105616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=105616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}