{"id":31,"date":"2024-12-05T09:18:33","date_gmt":"2024-12-05T09:18:33","guid":{"rendered":"https:\/\/sandbox.clicksmith.co.uk\/?page_id=31"},"modified":"2024-12-05T11:01:20","modified_gmt":"2024-12-05T11:01:20","slug":"flex-carousel-demo","status":"publish","type":"page","link":"https:\/\/sandbox.clicksmith.co.uk\/?page_id=31","title":{"rendered":"Flexi Carousel Demo"},"content":{"rendered":"<div class=\"home-hero gutter section\">\n\n\n\t<div class=\"wrapper\">\n\t\t<div class=\"home-hero__carousel flex-carousel\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex-carousel__item\" data-type=\"image\" data-duration=\"4500\">\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/sandbox.clicksmith.co.uk\/wp-content\/uploads\/2024\/12\/FINAL-Rear-elevation-1000x563-1.jpg\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex-carousel__item\" data-type=\"video\" data-duration=\"\">\n\t\t\t\t\t\t\t<video muted playsinline>\n\t\t\t\t\t\t\t\t<source src=\"https:\/\/sandbox.clicksmith.co.uk\/wp-content\/uploads\/2024\/12\/jga-about.mp4\">\n\t\t\t\t\t\t\t<\/video>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"flex-carousel__item\" data-type=\"image\" data-duration=\"4500\">\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/sandbox.clicksmith.co.uk\/wp-content\/uploads\/2024\/12\/jga-zabdiel-008-1000x667-1.jpg\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\n\t\n\t\t<div class=\"flex-carousel__dots\">\n\t\t\t\t\t\t\t\t<i><\/i>\n\t\t\t\t\t\t\t\t\t\t<i><\/i>\n\t\t\t\t\t\t\t\t\t\t<i><\/i>\n\t\t\t\t\t\t\t<\/div>\n\n\t\t<div class=\"home-hero__text\">\n\t\t\t<h3>This is a heading for the carousel<\/h3>\n\t\t<\/div>\n\t\t\n\t<\/div>\n\n\t\n\t\n<\/div>\n<style type=\"text\/css\">\n@import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flickity\/3.0.0\/flickity.min.css');\n.flex-carousel__item\n{\n\taspect-ratio: 4\/3;\n\twidth: 100%;\n\theight: auto;\n}\n\n.flex-carousel__item > * \n{\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.home-hero__carousel,\n.home-hero__carousel .flex-carousel__item\n{\n\taspect-ratio: 16 \/ 9;\n\twidth: 100%;\n\theight: auto;\n}\n\n.home-hero__carousel .flickity-viewport \n{\n\toverflow: hidden;\n}\n\n.flex-carousel__dots \n{\n\tdisplay: flex;\n\tgap: 0.5rem;\n}\n\n.flex-carousel__dots i\n{\n\tdisplay: block;\n\taspect-ratio: 1;\n\tborder-radius: 50%;\n\tbackground-color: white;\n\twidth: 0.8rem;\n\theight: auto;\n\tcursor: pointer;\n}\n\n.flex-carousel__dots i:hover \n{\n\topacity: 0.5;\n}\n\n\n.home-hero \n{\n\tposition: relative;\n}\n\n.home-hero .flex-carousel__dots \n{\n\tposition: absolute;\n\tbottom: 0;\n\tright: 0;\n\tpadding: 1rem;\n\tz-index: 1;\n}\n\n.home-hero .home-hero__text \n{\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 0;\n\tcolor: white;\n\tpadding: 1rem;\n}\n\n\n.home-hero .flex-carousel__dots i \n{\n\ttransition: all 100ms ease;\n\ttransform: scale(0.7);\n}\n\n.home-hero .flex-carousel__dots i.is-active \n{\n\ttransform: scale(1);\n} \n\n\n<\/style>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\n<!-- <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flickity\/3.0.0\/flickity.min.css\"> -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/flickity\/3.0.0\/flickity.pkgd.min.js\"><\/script>\n<script>\njQuery( function ( $ )\n{\n\t\/\/ set up some vars\n\tlet carousel = $('.flex-carousel'),\n\t\tcarouselOptions = {\n\t\t\tcontain: true,\n\t\t\tdragThreshold: 10,\n\t\t\tautoPlay: false,\t\t\t\t\t\t\/\/ we use our own timing for autoplay so we can decide how long each slide lasts\n\t\t\tsetGallerySize: false,\n\t\t\twrapAround: true,\n\t\t\tselectedAttraction: 0.01,\n\t\t\tpageDots: false,\n\t\t\tprevNextButtons: false\n\t\t\t\n\t\t},\n\t\tsTimeout = null,\n\t\tvideoEndBuffer = 2500,\t\t\t\t\t\t\/\/ video slides will change before the end so there's no sudden stop \/ or loop - milliseconds \n\t\tmqm = matchMedia('(min-width: 992px)'),\t\t\/\/ not used currently but would be for different behaviour depending on screen size\n\t\tcDots = $('.flex-carousel__dots'),\t\t\t\/\/ the dots container\n\t\tcDot = cDots.find('i')\t\t\t\t\t\t\/\/ the actual dots\n\n\n\t\/\/ add class when flickity has loaded (could be useful)\n\tcarousel.on('ready.flickity', function()\n\t{\n\t\tcarousel.addClass('is-active');\n\t});\n\n\t\/\/ event handler for whenever a slide is selected\n\tcarousel.on( 'select.flickity', function( event, index )\n\t{\n\t\tclearTimeout( sTimeout );\n\n\t\tlet slide = $('.flex-carousel__item:eq(' + index + ')'),\n\t\t\ttype = slide.data('type'),\n\t\t\tduration = slide.data('duration')\n\n\t\tif( type == 'video' )\n\t\t{\n\t\t\tlet video = slide.find('video').get(0),\n\t\t\t\tsDuration = video.duration * 1000\n\n\t\t\tvideo.currentTime = 0;\n\t\t\tvideo.play();\n\n\t\t\tsTimeout = setTimeout( function() \n\t\t\t{\n\t\t\t\tcarousel.flickity( 'next' );\n\t\t\t}, sDuration - videoEndBuffer );\n\t\t}\n\t\telse \n\t\t{\n\t\t\tsDuration = duration;\n\t\t\tsTimeout = setTimeout( function() \n\t\t\t{\n\t\t\t\tcarousel.flickity( 'next' );\n\t\t\t}, sDuration );\n\t\t}\n\n\t\tcDot.filter('.is-active').removeClass('is-active');\n\t\tcDot.eq(index).addClass('is-active');\n\t});\n\n\t\/\/ init flickity\n\tcarousel.flickity( carouselOptions );\n\n\t\/\/ click handler for carousel dots\n\tcDots.on('click', 'i', function() \n\t{\n\t\tvar index = $(this).index();\n\t\tcarousel.flickity('select', index );\n\t});\n});\n<\/script>\n\n<pre style=\"font-size: 0.8rem; font-family:'Courier New', Courier, monospace;\">\njQuery( function ( $ )\n{\n\t\/\/ set up some vars\n\tlet carousel = $('.flex-carousel'),\n\t\tcarouselOptions = {\n\t\t\tcontain: true,\n\t\t\tdragThreshold: 10,\n\t\t\tautoPlay: false,\t\t\t\t\t\t\/\/ we use our own timing for autoplay so we can decide how long each slide lasts\n\t\t\tsetGallerySize: false,\n\t\t\twrapAround: true,\n\t\t\tselectedAttraction: 0.01,\n\t\t\tpageDots: false,\n\t\t\tprevNextButtons: false\n\t\t\t\n\t\t},\n\t\tsTimeout = null,\n\t\tvideoEndBuffer = 2500,\t\t\t\t\t\t\/\/ video slides will change before the end so there's no sudden stop \/ or loop - milliseconds \n\t\tmqm = matchMedia('(min-width: 992px)'),\t\t\/\/ not used currently but would be for different behaviour depending on screen size\n\t\tcDots = $('.flex-carousel__dots'),\t\t\t\/\/ the dots container\n\t\tcDot = cDots.find('i')\t\t\t\t\t\t\/\/ the actual dots\n\n\n\t\/\/ add class when flickity has loaded (could be useful)\n\tcarousel.on('ready.flickity', function()\n\t{\n\t\tcarousel.addClass('is-active');\n\t});\n\n\t\/\/ event handler for whenever a slide is selected\n\tcarousel.on( 'select.flickity', function( event, index )\n\t{\n\t\tclearTimeout( sTimeout );\n\n\t\tlet slide = $('.flex-carousel__item:eq(' + index + ')'),\n\t\t\ttype = slide.data('type'),\n\t\t\tduration = slide.data('duration')\n\n\t\tif( type == 'video' )\n\t\t{\n\t\t\tlet video = slide.find('video').get(0),\n\t\t\t\tsDuration = video.duration * 1000\n\n\t\t\tvideo.currentTime = 0;\n\t\t\tvideo.play();\n\n\t\t\tsTimeout = setTimeout( function() \n\t\t\t{\n\t\t\t\tcarousel.flickity( 'next' );\n\t\t\t}, sDuration - videoEndBuffer );\n\t\t}\n\t\telse \n\t\t{\n\t\t\tsDuration = duration;\n\t\t\tsTimeout = setTimeout( function() \n\t\t\t{\n\t\t\t\tcarousel.flickity( 'next' );\n\t\t\t}, sDuration );\n\t\t}\n\n\t\tcDot.filter('.is-active').removeClass('is-active');\n\t\tcDot.eq(index).addClass('is-active');\n\t});\n\n\t\/\/ init flickity\n\tcarousel.flickity( carouselOptions );\n\n\t\/\/ click handler for carousel dots\n\tcDots.on('click', 'i', function() \n\t{\n\t\tvar index = $(this).index();\n\t\tcarousel.flickity('select', index );\n\t});\n});\n<\/pre>","protected":false},"excerpt":{"rendered":"<p>This is a heading for the carousel jQuery( function ( $ ) { \/\/ set up some vars let carousel = $(&#8216;.flex-carousel&#8217;), carouselOptions = { contain: true, dragThreshold: 10, autoPlay: false, \/\/ we use our own timing for autoplay so we can decide how long each slide lasts setGallerySize: false, wrapAround: true, selectedAttraction: 0.01, pageDots: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":8,"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/sandbox.clicksmith.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}