An image slider you can use via Kirbytext for Kirby CMS

slider.php

<?php

kirbytext::$tags['slider'] = array(
  'html' => function($tag) {

    $html  = '<div class="slider js_slider">';
    $html .= '<div class="frame js_frame">';
    $html .= '<ul class="slides js_slides">';

    foreach($tag->page()->images()->filterBy('filename', '*=', $tag->attr('slider')) as $slide) {
      $html .= '<li class="js_slide">';
      $html .= '<img src="' . $slide->url() . '">';
      $html .= '</li>';
    }

    $html .= '</ul></div>';
    $html .= ' <span class="js_prev prev">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path class="apath" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
                </span>
                <span class="js_next next">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path class="apath" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
                </span>';
    $html .= '</div>';

    return $html;

  }
);

readme.md

How it works

The value you put into the kirbytext tag will be used to pattern match the file names available on the page.

The slider functionality is from lory so check that link for good documentation on how to customize, and that's also the best place to get the most up-to-date version of the JS.

If your your page has the following images:

• 01_pvh_home_lores.jpg
• 06_pvh_phone.jpg
• pvh_home_lores.jpg
• pvh_mov_framed.mp4
• screen-shot-2016-10-26-at-5.23.08-pm.png
• screen-shot-2016-10-26-at-5.23.12-pm.png
• screen-shot-2016-10-26-at-5.23.15-pm.png

Then using (slider: screen-shot) in any of your fields that accept KirbyText will generate an image slider using the last 3 images.

More examples

Given the following images on the page:

• my-fav-dogs-pic-01.jpg
• my-fav-dogs-pic-02.jpg
• my-fav-dogs-pic-03.jpg
• cat-pic-01.jpg
• bad_dog_pic.jpg

With (slider: my-fav-dogs-pic-) the first three images will be used.

Given these images:

• special-flower-whatever.png
• whatever-fountain.jpg
• this-landscape-is_whatever.gif

With (slider: whatever) all the images will be used.

How to install

1. Put slider.php into /site/tags/ (create the folder if it's not there already).
2. Reference or otherwise include jquery.lory.min.js so it's available on the pages you want to have sliders
3. Fold slider.css into your site styles, it doesn't need to be it's own file.
4. Initiate the lory script, see sliderstart.js for reference on how to do that.

Optional things you could do

• Swap the JS and make a non-jquery versions
• Update the plugin to customize things like the back/next arrow SVGs
• Enhance the styles to better suite your website design

jquery.lory.min.js

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){e.fn.lory=function(t){return this.each(function(){var n;e.data(this,"lory")||(n=e.extend({},t,e(this).data()),e.data(this,"lory",(0,o.lory)(this,n)))})}}var o=n(1);"undefined"!=typeof jQuery&&i(jQuery)},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){function n(e,t){var n=z,i=n.classNameActiveSlide;e.forEach(function(e,t){e.classList.contains(i)&&e.classList.remove(i)}),e[t].classList.add(i)}function i(e){var t=z,n=t.infinite,i=e.slice(0,n),o=e.slice(e.length-n,e.length);return i.forEach(function(e){var t=e.cloneNode(!0);B.appendChild(t)}),o.reverse().forEach(function(e){var t=e.cloneNode(!0);B.insertBefore(t,B.firstChild)}),B.addEventListener(O.transitionEnd,b),f.call(B.children)}function o(t,n,i){(0,l["default"])(e,t+".lory."+n,i)}function a(e,t,n){var i=B&&B.style;i&&(i[O.transition+"TimingFunction"]=n,i[O.transition+"Duration"]=t+"ms",O.hasTranslate3d?i[O.transform]="translate3d("+e+"px, 0, 0)":i[O.transform]="translate("+e+"px, 0)")}function d(e,t){var i=z,r=i.slideSpeed,s=i.slidesToScroll,d=i.infinite,l=i.rewind,c=i.rewindSpeed,u=i.ease,v=i.classNameActiveSlide,m=r,h=t?P+1:P-1,p=Math.round(M-S);o("before","slide",{index:P,nextSlide:h}),"number"!=typeof e&&(e=t?P+s:P-s),e=Math.min(Math.max(e,0),j.length-1),d&&void 0===t&&(e+=d);var E=Math.min(Math.max(j[e].offsetLeft*-1,p*-1),0);l&&Math.abs(N.x)===p&&t&&(E=0,e=0,m=c),a(E,m,u),N.x=E,j[e].offsetLeft<=p&&(P=e),!d||e!==j.length-d&&0!==e||(t&&(P=d),t||(P=j.length-2*d),N.x=j[P].offsetLeft*-1,A=function(){a(j[P].offsetLeft*-1,0,void 0)}),v&&n(f.call(j),P),o("after","slide",{currentSlide:P})}function c(){o("before","init"),O=(0,s["default"])(),z=r({},u["default"],t);var a=z,d=a.classNameFrame,l=a.classNameSlideContainer,c=a.classNamePrevCtrl,m=a.classNameNextCtrl,h=a.enableMouseEvents,y=a.classNameActiveSlide;_=e.getElementsByClassName(d)[0],B=_.getElementsByClassName(l)[0],k=e.getElementsByClassName(c)[0],T=e.getElementsByClassName(m)[0],N={x:B.offsetLeft,y:B.offsetTop},j=z.infinite?i(f.call(B.children)):f.call(B.children),v(),y&&n(j,P),k&&T&&(k.addEventListener("click",p),T.addEventListener("click",E)),_.addEventListener("touchstart",x),h&&(_.addEventListener("mousedown",x),_.addEventListener("click",g)),z.window.addEventListener("resize",C),o("after","init")}function v(){var e=z,t=e.infinite,i=e.ease,o=e.rewindSpeed,r=e.rewindOnResize,s=e.classNameActiveSlide;M=B.getBoundingClientRect().width||B.offsetWidth,S=_.getBoundingClientRect().width||_.offsetWidth,S===M&&(M=j.reduce(function(e,t){return e+t.getBoundingClientRect().width||t.offsetWidth},0)),r?P=0:(i=null,o=0),t?(a(j[P+t].offsetLeft*-1,0,null),P+=t,N.x=j[P].offsetLeft*-1):(a(j[P].offsetLeft*-1,o,i),N.x=j[P].offsetLeft*-1),s&&n(f.call(j),P)}function m(e){d(e)}function h(){return P-z.infinite||0}function p(){d(!1,!1)}function E(){d(!1,!0)}function y(){o("before","destroy"),_.removeEventListener(O.transitionEnd,b),_.removeEventListener("touchstart",x),_.removeEventListener("touchmove",L),_.removeEventListener("touchend",w),_.removeEventListener("mousemove",L),_.removeEventListener("mousedown",x),_.removeEventListener("mouseup",w),_.removeEventListener("mouseleave",w),_.removeEventListener("click",g),z.window.removeEventListener("resize",C),k&&k.removeEventListener("click",p),T&&T.removeEventListener("click",E),z.infinite&&Array.apply(null,Array(z.infinite)).forEach(function(){B.removeChild(B.firstChild),B.removeChild(B.lastChild)}),o("after","destroy")}function b(){A&&(A(),A=void 0)}function x(e){var t=z,n=t.enableMouseEvents,i=e.touches?e.touches[0]:e;n&&(_.addEventListener("mousemove",L),_.addEventListener("mouseup",w),_.addEventListener("mouseleave",w)),_.addEventListener("touchmove",L),_.addEventListener("touchend",w);var r=i.pageX,a=i.pageY;D={x:r,y:a,time:Date.now()},Q=void 0,R={},o("on","touchstart",{event:e})}function L(e){var t=e.touches?e.touches[0]:e,n=t.pageX,i=t.pageY;R={x:n-D.x,y:i-D.y},"undefined"==typeof Q&&(Q=!!(Q||Math.abs(R.x)<Math.abs(R.y))),!Q&&D&&(e.preventDefault(),a(N.x+R.x,0,null)),o("on","touchmove",{event:e})}function w(e){var t=D?Date.now()-D.time:void 0,n=Number(t)<300&&Math.abs(R.x)>25||Math.abs(R.x)>S/3,i=!P&&R.x>0||P===j.length-1&&R.x<0,r=R.x<0;Q||(n&&!i?d(!1,r):a(N.x,z.snapBackSpeed)),D=void 0,_.removeEventListener("touchmove",L),_.removeEventListener("touchend",w),_.removeEventListener("mousemove",L),_.removeEventListener("mouseup",w),_.removeEventListener("mouseleave",w),o("on","touchend",{event:e})}function g(e){R.x&&e.preventDefault()}function C(e){v(),o("on","resize",{event:e})}var N=void 0,M=void 0,S=void 0,j=void 0,_=void 0,B=void 0,k=void 0,T=void 0,O=void 0,A=void 0,P=0,z={};"undefined"!=typeof jQuery&&e instanceof jQuery&&(e=e[0]);var D=void 0,R=void 0,Q=void 0;return c(),{setup:c,reset:v,slideTo:m,returnIndex:h,prev:p,next:E,destroy:y}}Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e};t.lory=o;var a=n(2),s=i(a),d=n(3),l=i(d),c=n(5),u=i(c),f=Array.prototype.slice},function(e,t){(function(e){"use strict";function n(){var t=void 0,n=void 0,i=void 0,o=void 0;return function(){var r=document.createElement("_"),a=r.style,s=void 0;""===a[s="webkitTransition"]&&(i="webkitTransitionEnd",n=s),""===a[s="transition"]&&(i="transitionend",n=s),""===a[s="webkitTransform"]&&(t=s),""===a[s="msTransform"]&&(t=s),""===a[s="transform"]&&(t=s),document.body.insertBefore(r,null),a[t]="translate3d(0, 0, 0)",o=!!e.getComputedStyle(r).getPropertyValue(t),document.body.removeChild(r)}(),{transform:t,transition:n,transitionEnd:i,hasTranslate3d:o}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n}).call(t,function(){return this}())},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){var i=new a["default"](t,{bubbles:!0,cancelable:!0,detail:n});e.dispatchEvent(i)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o;var r=n(4),a=i(r)},function(e,t){(function(t){function n(){try{var e=new i("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(t){}return!1}var i=t.CustomEvent;e.exports=n()?i:"function"==typeof document.createEvent?function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n}:function(e,t){var n=document.createEventObject();return n.type=e,t?(n.bubbles=Boolean(t.bubbles),n.cancelable=Boolean(t.cancelable),n.detail=t.detail):(n.bubbles=!1,n.cancelable=!1,n.detail=void 0),n}}).call(t,function(){return this}())},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={slidesToScroll:1,slideSpeed:300,rewindSpeed:600,snapBackSpeed:200,ease:"ease",rewind:!1,infinite:!1,classNameFrame:"js_frame",classNameSlideContainer:"js_slides",classNamePrevCtrl:"js_prev",classNameNextCtrl:"js_next",classNameActiveSlide:"active",enableMouseEvents:!1,window:window,rewindOnResize:!0}}])});

slider.css

/* ----------------------------------------------------------------------------------------------------------
Slider ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/*
  This is just some starting CSS, you'll want to customize to your site
*/
.slider {
	position: relative;
}

.frame {
    /**
     * (optional) wrapper width, specifies width of the slider frame.
     */
    width: 600px;
		margin:0 auto;
    position: relative;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}

.slides {
    display: inline-block;
}

.slides li {
    position: relative;
    display: inline-block;

    /**
     * (optional) if the content inside the slide element has a defined size.
     */
    width: 600px;
}

.prev, .next {
    position: absolute;
    top: 50%;
    margin-top: -250px;
    display: block;
    cursor: pointer;
}

.next {
    right: 0px;
}

.prev {
    left: 0px;
}

.next svg, .prev svg {
    width: 250px;
		height:auto;
}

.apath {
	fill:#000;
}

sliderstart.js

$(function(){

    $('.js_slider').lory({
         infinite: 1
     });
  
});