{"id":19085,"date":"2024-12-16T21:11:22","date_gmt":"2024-12-16T20:11:22","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=19085"},"modified":"2024-12-16T21:11:22","modified_gmt":"2024-12-16T20:11:22","slug":"aspect-ratio-slider-example","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/aspect-ratio-slider-example\/","title":{"rendered":"Slider &#8211; aspect ratio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19085\" class=\"elementor elementor-19085\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f63a8b8 e-con-full aspect-ratio-swiper e-flex e-con e-parent\" data-id=\"f63a8b8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-edfefd8 elementor--h-position-center elementor--v-position-middle elementor-arrows-position-inside elementor-pagination-position-inside elementor-widget elementor-widget-slides\" data-id=\"edfefd8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;navigation&quot;:&quot;both&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;transition&quot;:&quot;slide&quot;,&quot;transition_speed&quot;:500}\" data-widget_type=\"slides.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper\">\n\t\t\t\t\t<div class=\"elementor-slides-wrapper elementor-main-swiper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Slides\" dir=\"ltr\" data-animation=\"fadeInUp\">\n\t\t\t\t<div class=\"swiper-wrapper elementor-slides\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-repeater-item-8f24c57 swiper-slide\" role=\"group\" aria-roledescription=\"slide\"><div class=\"swiper-slide-bg\" role=\"img\" aria-label=\"Home_Interior_Design-Hero-Slider3.jpeg\"><\/div><div class=\"elementor-background-overlay\"><\/div><div class=\"swiper-slide-inner\" ><div class=\"swiper-slide-contents\"><div class=\"elementor-slide-heading\">Slide 1 Heading<\/div><div class=\"elementor-slide-description\">Lorem ipsum dolor sit amet consectetur adipiscing elit dolor<\/div><div  class=\"elementor-button elementor-slide-button elementor-size-sm\">Click Here<\/div><\/div><\/div><\/div><div class=\"elementor-repeater-item-c9a89f5 swiper-slide\" role=\"group\" aria-roledescription=\"slide\"><div class=\"swiper-slide-bg\" role=\"img\" aria-label=\"Home_Interior_Design-Hero-Slider2.jpeg\"><\/div><div class=\"elementor-background-overlay\"><\/div><div class=\"swiper-slide-inner\" ><div class=\"swiper-slide-contents\"><div class=\"elementor-slide-heading\">Slide 2 Heading<\/div><div class=\"elementor-slide-description\">Lorem ipsum dolor sit amet consectetur adipiscing elit dolor<\/div><div  class=\"elementor-button elementor-slide-button elementor-size-sm\">Click Here<\/div><\/div><\/div><\/div><div class=\"elementor-repeater-item-b8c327f swiper-slide\" role=\"group\" aria-roledescription=\"slide\"><div class=\"swiper-slide-bg\" role=\"img\" aria-label=\"Home_Interior_Design-Hero-small_Image.jpeg\"><\/div><div class=\"elementor-background-overlay\"><\/div><div class=\"swiper-slide-inner\" ><div class=\"swiper-slide-contents\"><div class=\"elementor-slide-heading\">Slide 3 Heading<\/div><div class=\"elementor-slide-description\">Lorem ipsum dolor sit amet consectetur adipiscing elit dolor<\/div><div  class=\"elementor-button elementor-slide-button elementor-size-sm\">Click Here<\/div><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\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\" aria-label=\"Previous slide\">\n\t\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\t<\/div>\n\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\" aria-label=\"Next slide\">\n\t\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\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ef9ca5 e-flex e-con-boxed e-con e-parent\" data-id=\"1ef9ca5\" 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-f76f02d elementor-widget elementor-widget-heading\" data-id=\"f76f02d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to use<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5041fc5 elementor-widget elementor-widget-text-editor\" data-id=\"5041fc5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ol><li>Add container and give it classname <strong>aspect-ratio-swiper.<\/strong><\/li><li>Drag in a slides widget and add images, text&#8230;<\/li><li>Select the container, go to advanced tab&gt; Custom CSS&#8230;\u00a0 and copy paste this CSS.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b2ef34 elementor-widget elementor-widget-code-highlight\" data-id=\"9b2ef34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>:root {\n    \/*change aspect ratio per device here *\/\n    --aspect-ratio_desktop: 16\/9;\n    --aspect-ratio_tablet: 1\/1;\n    --aspect-ratio_mobile: 5\/10\n}\n\n.aspect-ratio-swiper .swiper-slide {\n    height: auto !important;\n}\n\n[data-elementor-device-mode=\"desktop\"] .aspect-ratio-swiper,\n[data-elementor-device-mode=\"desktop\"] .swiper-slide\n{\n    aspect-ratio: var(--aspect-ratio_desktop);\n}\n\n\n[data-elementor-device-mode=\"tablet\"] .aspect-ratio-swiper, [data-elementor-device-mode=\"tablet\"] .swiper-slide  {\n    aspect-ratio: var(--aspect-ratio_tablet);\n}\n\n\n[data-elementor-device-mode=\"mobile\"] .aspect-ratio-swiper, [data-elementor-device-mode=\"mobile\"] .swiper-slide {\n    aspect-ratio: var(--aspect-ratio_mobile);\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Slide 1 HeadingLorem ipsum dolor sit amet consectetur adipiscing elit dolorClick HereSlide 2 HeadingLorem ipsum dolor sit amet consectetur adipiscing elit dolorClick HereSlide 3 HeadingLorem ipsum dolor sit amet consectetur adipiscing elit dolorClick Here Previous slide Next slide How to use Add container and give it classname aspect-ratio-swiper. Drag in a slides widget and add [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[45,42],"tags":[],"class_list":["post-19085","page","type-page","status-publish","hentry","category-aspect-ratio","category-widget-custom-styling"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/19085","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=19085"}],"version-history":[{"count":0,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/19085\/revisions"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=19085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=19085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=19085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}