Skip to content

Instantly share code, notes, and snippets.

@wpsoul

wpsoul/gist:dd715acb17493eb9b0a08b3241c726fe

Created October 2, 2024 11:59
Show Gist options
  • Save wpsoul/dd715acb17493eb9b0a08b3241c726fe to your computer and use it in GitHub Desktop.
Save wpsoul/dd715acb17493eb9b0a08b3241c726fe to your computer and use it in GitHub Desktop.
Download ZIP
Slider with custom arrows on Greenshift
Raw
gistfile1.txt
<!-- wp:greenshift-blocks/element {"id":"gsbp-6534bb5","tag":"section","type":"inner","className":"gs-slider-root","localId":"gsbp-6534bb5","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr"},"isVariation":"contentwrapper"} -->
<section class="gs-slider-root gsbp-6534bb5 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-d4613e1","type":"inner","localId":"gsbp-d4613e1","styleAttributes":{"maxWidth":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size)"],"width":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size)"]},"metadata":{"name":"Content Area"}} -->
<div class="gsbp-d4613e1"><!-- wp:greenshift-blocks/swiper {"id":"gsbp-5256ca0","tabs":6,"slidesPerView":[1,3,2,1],"sliderspacing":{"margin":{"values":{"bottom":["10px"]},"locked":false},"padding":{"values":{},"locked":false}},"navigationarrows":false,"bullets":false,"bulletPos":"-30px","overflow":true,"isQuery":"grid","align":"wide"} -->
<div class="wp-block-greenshift-blocks-swiper alignwide gs-swiper gspb_slider-id-gsbp-5256ca0" style="position:relative"><div class="gs-swiper-init" data-slidesperview="1" data-slidesperviewmd="3" data-slidesperviewsm="2" data-slidesperviewxs="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="400" data-loop="false" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="false" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="" data-coverflowshadow="false"><div class=""><div class=""><!-- wp:greenshift-blocks/querygrid {"id":"gsbp-76d27e5","show":6,"isSlider":true} -->
<!-- wp:greenshift-blocks/dynamic-post-image {"id":"gsbp-ee76d2e","image_size":"medium","scale":"cover","width":["custom",null,null,null],"height":["custom",null,null,null],"widthUnit":["%","px","px","px"],"customWidth":[100,null,null,null],"customHeight":[210,null,null,null]} /-->
<!-- wp:greenshift-blocks/element {"id":"gsbp-0d03c0d","type":"inner","localId":"gsbp-0d03c0d","styleAttributes":{"paddingLeft":["15px"],"paddingRight":["15px"],"paddingTop":["15px"],"paddingBottom":["15px"]}} -->
<div class="gsbp-0d03c0d"><!-- wp:greenshift-blocks/meta {"id":"gsbp-6a1fa92","typographyValue":{"textShadow":{},"colorlinks":"#2184f9","size":["14px"],"line_height":["20px"]},"field":"category","post_type":"post","type":"taxonomylink","typeselect":"taxonomy"} /-->
<!-- wp:greenshift-blocks/dynamic-post-title {"id":"gsbp-c6e34f1","spacing":{"margin":{"values":{"top":["10px"],"bottom":["15px"]},"locked":false},"padding":{"values":{},"locked":false}},"typography":{"textShadow":{},"size":["1.2rem"],"line_height":["1.5rem"],"decoration":"remove"}} /-->
<!-- wp:greenshift-blocks/element {"id":"gsbp-96ddd56","type":"inner","localId":"gsbp-96ddd56","styleAttributes":{"display":["flex"],"flexDirection":["row"],"alignItems":["center"],"columnGap":["0.4rem"]}} -->
<div class="gsbp-96ddd56"><!-- wp:greenshift-blocks/meta {"id":"gsbp-eaaaf61","typographyValue":{"textShadow":{},"size":["13px"],"customweight":"bold"},"typographyPostfix":{"textShadow":{},"color":"#0000003b"},"spacingValue":{"margin":{"values":{"right":["8px"]},"locked":false},"padding":{"values":{},"locked":false}},"field":"author_name","type":"author_name","typeselect":"authordata","postfix":"/"} /-->
<!-- wp:greenshift-blocks/meta {"id":"gsbp-33c3736","background":{"overlayOpacity":50},"typographyValue":{"textShadow":{},"size":["13px"]},"field":"author_name","post_type":"post","type":"post_modified","typeselect":"postdata"} /--></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- /wp:greenshift-blocks/querygrid --></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-scrollbar"></div></div></div>
<!-- /wp:greenshift-blocks/swiper -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-24af5ee","type":"inner","localId":"gsbp-24af5ee","styleAttributes":{"display":["flex"],"flexDirection":["row"],"flexColumns_Extra":2,"flexWidths_Extra":{"desktop":{"name":"50/50","widths":[50,50]},"tablet":{"name":"50/50","widths":[50,50]},"mobile":{"name":"50/50","widths":[50,50]}},"columnGap":["15px"]}} -->
<div class="gsbp-24af5ee"><!-- wp:greenshift-blocks/element {"id":"gsbp-3481409","type":"inner","className":"gs-slider-custom-btn-left","localId":"gsbp-3481409","styleAttributes":{"display":["flex"],"flexDirection":["row"],"justifyContent":["flex-start"],"alignItems":["center"],"columnGap":["20px"],"backgroundColor":["#0065c4"],"paddingLink_Extra":"all","paddingTop":["15px"],"paddingBottom":["15px"],"paddingLeft":["15px"],"paddingRight":["15px"],"color":["#ffffff"],"cursor":["pointer"]}} -->
<div class="gs-slider-custom-btn-left gsbp-3481409"><!-- wp:greenshift-blocks/element {"id":"gsbp-305be71","tag":"svg","icon":{"icon":{"font":"rhicon rhi-arrow-left","svg":"","image":""},"type":"font"},"localId":"gsbp-305be71","styleAttributes":{"width":["50px"],"height":["50px"],"fill":["#ffffff"]}} -->
<svg viewBox="0 0 896 1024" width="896" height="1024" class="gsbp-305be71"><path d="M463.072 951.070l14.142-14.14c9.372-9.372 9.372-24.568 0-33.942l-356.988-356.988h751.774c13.254 0 24-10.746 24-24v-20c0-13.254-10.746-24-24-24h-751.774l356.988-356.988c9.372-9.372 9.372-24.568 0-33.942l-14.142-14.14c-9.372-9.372-24.568-9.372-33.94 0l-422.102 422.1c-9.372 9.372-9.372 24.568 0 33.942l422.102 422.1c9.372 9.372 24.568 9.372 33.94-0.002z" /></svg>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-3d09c73","interactionLayers":[{"actions":[{"actionname":"sethtml","attrValue":"{{CONTENT}}","attrValueSelector":".swiper-slide-prev .gspb-dynamic-title-element a"}],"env":"no-action","triggerData":{"trigger":"on-load"}},{"actions":[{"actionname":"sethtml","attrValue":"{{CONTENT}}","attrValueSelector":".swiper-slide-prev .gspb-dynamic-title-element a","customMath":[]}],"env":"no-action","triggerData":{"trigger":"on-slider-change","selector":"{CLOSEST:.gs-slider-root}","delay":true,"delaytime":"100"}}],"textContent":"Move Left","className":"","localId":"gsbp-3d09c73"} -->
<div data-gspbactions="[{&quot;actions&quot;:[{&quot;actionname&quot;:&quot;sethtml&quot;,&quot;attrValue&quot;:&quot;{{CONTENT}}&quot;,&quot;attrValueSelector&quot;:&quot;.swiper-slide-prev .gspb-dynamic-title-element a&quot;}],&quot;env&quot;:&quot;no-action&quot;,&quot;triggerData&quot;:{&quot;trigger&quot;:&quot;on-load&quot;}},{&quot;actions&quot;:[{&quot;actionname&quot;:&quot;sethtml&quot;,&quot;attrValue&quot;:&quot;{{CONTENT}}&quot;,&quot;attrValueSelector&quot;:&quot;.swiper-slide-prev .gspb-dynamic-title-element a&quot;,&quot;customMath&quot;:[]}],&quot;env&quot;:&quot;no-action&quot;,&quot;triggerData&quot;:{&quot;trigger&quot;:&quot;on-slider-change&quot;,&quot;selector&quot;:&quot;{CLOSEST:.gs-slider-root}&quot;,&quot;delay&quot;:true,&quot;delaytime&quot;:&quot;100&quot;}}]">Move Left</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-5d69cd6","type":"inner","className":"gs-slider-custom-btn-right","localId":"gsbp-5d69cd6","styleAttributes":{"display":["flex"],"flexDirection":["row"],"justifyContent":["flex-end"],"alignItems":["center"],"columnGap":["20px"],"backgroundColor":["#0065c4"],"paddingLink_Extra":"all","paddingTop":["15px"],"paddingBottom":["15px"],"paddingLeft":["15px"],"paddingRight":["15px"],"color":["#ffffff"],"cursor":["pointer"]}} -->
<div class="gs-slider-custom-btn-right gsbp-5d69cd6"><!-- wp:greenshift-blocks/element {"id":"gsbp-0650ac6","interactionLayers":[{"actions":[{"actionname":"sethtml","attrValue":"{{CONTENT}}","attrValueSelector":".swiper-slide-next .gspb-dynamic-title-element a"}],"env":"no-action","triggerData":{"trigger":"on-load"}},{"actions":[{"actionname":"sethtml","attrValue":"{{CONTENT}}","attrValueSelector":".swiper-slide-next .gspb-dynamic-title-element a","customMath":[]}],"env":"no-action","triggerData":{"trigger":"on-slider-change","selector":"{CLOSEST:.gs-slider-root}","delay":true,"delaytime":"100"}}],"textContent":"Move Right","className":"","localId":"gsbp-0650ac6"} -->
<div data-gspbactions="[{&quot;actions&quot;:[{&quot;actionname&quot;:&quot;sethtml&quot;,&quot;attrValue&quot;:&quot;{{CONTENT}}&quot;,&quot;attrValueSelector&quot;:&quot;.swiper-slide-next .gspb-dynamic-title-element a&quot;}],&quot;env&quot;:&quot;no-action&quot;,&quot;triggerData&quot;:{&quot;trigger&quot;:&quot;on-load&quot;}},{&quot;actions&quot;:[{&quot;actionname&quot;:&quot;sethtml&quot;,&quot;attrValue&quot;:&quot;{{CONTENT}}&quot;,&quot;attrValueSelector&quot;:&quot;.swiper-slide-next .gspb-dynamic-title-element a&quot;,&quot;customMath&quot;:[]}],&quot;env&quot;:&quot;no-action&quot;,&quot;triggerData&quot;:{&quot;trigger&quot;:&quot;on-slider-change&quot;,&quot;selector&quot;:&quot;{CLOSEST:.gs-slider-root}&quot;,&quot;delay&quot;:true,&quot;delaytime&quot;:&quot;100&quot;}}]">Move Right</div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-e39003a","tag":"svg","icon":{"icon":{"font":"rhicon rhi-arrow-left","svg":"","image":""},"type":"font"},"localId":"gsbp-e39003a","styleAttributes":{"width":["50px"],"height":["50px"],"fill":["#ffffff"],"transformLink_Extra":{"rotate":true},"rotate_Extra":["180"],"transform":["rotate(180deg)"]}} -->
<svg viewBox="0 0 896 1024" width="896" height="1024" class="gsbp-e39003a"><path d="M463.072 951.070l14.142-14.14c9.372-9.372 9.372-24.568 0-33.942l-356.988-356.988h751.774c13.254 0 24-10.746 24-24v-20c0-13.254-10.746-24-24-24h-751.774l356.988-356.988c9.372-9.372 9.372-24.568 0-33.942l-14.142-14.14c-9.372-9.372-24.568-9.372-33.94 0l-422.102 422.1c-9.372 9.372-9.372 24.568 0 33.942l422.102 422.1c9.372 9.372 24.568 9.372 33.94-0.002z" /></svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment