Streaming live at 10am (PST)

Custom code displaying error on CMS template page

Hi, I’m hoping someone can help me. I’ve used this before-after slider on static pages without any issues: magicslider - Webflow

But for some reason, when I try to add it to a CMS template page, some of the code is highlighted red and the slider isn’t working.

Do you know what the error is? Thanks in advance for your help! :slight_smile:

I was testing the slider on the “Sliders Template” CMS page, and this is where the error is appearing.


Here is my site Read-Only:

https://preview.webflow.com/preview/supreme-roof-plumbing?utm_medium=preview_link&utm_source=designer&utm_content=supreme-roof-plumbing&preview=fc2d5375adceb0b5ca6e147f7401376e&pageId=605fd1449a7d3d1f70f9d626&itemId=605fd16aed0c90734a7f8efe&mode=preview

Hey Ash!

It looks like Webflow’s code editor doesn’t like seeing those double curly braces ({{) next to each other. Either move the code from the second curly brace onto a new line or add a space between the two. E.g. like this:

function y(t,e,n,a,i,o){
{var r, u;

If you want, you can use the below formatted code so that it’s easier to read (instead of 1 long line):

!(function (t) {
	t.fn.twentytwenty = function (e) {
		var e = t.extend({ default_offset_pct: 0.5, orientation: 'horizontal' }, e)
		return this.each(function () {
			var n = e.default_offset_pct,
				i = t(this),
				a = e.orientation,
				s = 'vertical' === a ? 'down' : 'left',
				d = 'vertical' === a ? 'up' : 'right'
			i.wrap("<div class='twentytwenty-wrapper twentytwenty-" + a + "'></div>"),
				i.append("<div class='twentytwenty-overlay'></div>")
			var r = i.find('img:first'),
				w = i.find('img:last')
			i.append("<div class='twentytwenty-handle'></div>")
			var c = i.find('.twentytwenty-handle')
			c.append("<span class='twentytwenty-" + s + "-arrow'></span>"),
				c.append("<span class='twentytwenty-" + d + "-arrow'></span>"),
				i.addClass('twentytwenty-container'),
				r.addClass('twentytwenty-before'),
				w.addClass('twentytwenty-after')
			var o = i.find('.twentytwenty-overlay')
			o.append("<div class='twentytwenty-before-label'></div>"),
				o.append("<div class='twentytwenty-after-label'></div>")
			var f = function (t) {
					var e = r.width(),
						n = r.height()
					return {
						w: e + 'px',
						h: n + 'px',
						cw: t * e + 'px',
						ch: t * n + 'px',
					}
				},
				l = function (t) {
					'vertical' === a
						? r.css('clip', 'rect(0,' + t.w + ',' + t.ch + ',0)')
						: r.css('clip', 'rect(0,' + t.cw + ',' + t.h + ',0)'),
						i.css('height', t.h)
				},
				v = function (t) {
					var e = f(t)
					c.css(
						'vertical' === a ? 'top' : 'left',
						'vertical' === a ? e.ch : e.cw
					),
						l(e)
				}
			t(window).on('resize.twentytwenty', function () {
				v(n)
			})
			var p = 0,
				y = 0
			c.on('movestart', function (t) {
				;((t.distX > t.distY && t.distX < -t.distY) ||
					(t.distX < t.distY && t.distX > -t.distY)) &&
				'vertical' !== a
					? t.preventDefault()
					: ((t.distX < t.distY && t.distX < -t.distY) ||
							(t.distX > t.distY && t.distX > -t.distY)) &&
					  'vertical' === a &&
					  t.preventDefault(),
					i.addClass('active'),
					(p = i.offset().left),
					(offsetY = i.offset().top),
					(y = r.width()),
					(imgHeight = r.height())
			}),
				c.on('moveend', function () {
					i.removeClass('active')
				}),
				c.on('move', function (t) {
					i.hasClass('active') &&
						((n =
							'vertical' === a
								? (t.pageY - offsetY) / imgHeight
								: (t.pageX - p) / y),
						0 > n && (n = 0),
						n > 1 && (n = 1),
						v(n))
				}),
				i.find('img').on('mousedown', function (t) {
					t.preventDefault()
				}),
				t(window).trigger('resize.twentytwenty')
		})
	}
})(jQuery)

!(function (t) {
	'function' == typeof define && define.amd ? define(['jquery'], t) : t(jQuery)
})(function (t, e) {
	function n(t) {
		function e() {
			a ? (n(), O(e), (i = !0), (a = !1)) : (i = !1)
		}
		var n = t,
			a = !1,
			i = !1
		;(this.kick = function () {
			;(a = !0), i || e()
		}),
			(this.end = function (t) {
				var e = n
				t &&
					(i
						? ((n = a
								? function () {
										e(), t()
								  }
								: t),
						  (a = !0))
						: t())
			})
	}
	function a() {
		return !0
	}
	function i() {
		return !1
	}
	function o(t) {
		t.preventDefault()
	}
	function r(t) {
		z[t.target.tagName.toLowerCase()] || t.preventDefault()
	}
	function u(t) {
		return 1 === t.which && !t.ctrlKey && !t.altKey
	}
	function c(t, e) {
		var n, a
		if (t.identifiedTouch) return t.identifiedTouch(e)
		for (n = -1, a = t.length; ++n < a; ) if (t[n].identifier === e) return t[n]
	}
	function d(t, e) {
		var n = c(t.changedTouches, e.identifier)
		if (n && (n.pageX !== e.pageX || n.pageY !== e.pageY)) return n
	}
	function m(t) {
		var e
		u(t) &&
			((e = {
				target: t.target,
				startX: t.pageX,
				startY: t.pageY,
				timeStamp: t.timeStamp,
			}),
			K(document, Q.move, f, e),
			K(document, Q.cancel, s, e))
	}
	function f(t) {
		var e = t.data
		X(t, e, t, v)
	}
	function s() {
		v()
	}
	function v() {
		L(document, Q.move, f), L(document, Q.cancel, s)
	}
	function p(t) {
		var e, n
		z[t.target.tagName.toLowerCase()] ||
			((e = t.changedTouches[0]),
			(n = {
				target: e.target,
				startX: e.pageX,
				startY: e.pageY,
				timeStamp: t.timeStamp,
				identifier: e.identifier,
			}),
			K(document, B.move + '.' + e.identifier, g, n),
			K(document, B.cancel + '.' + e.identifier, h, n))
	}
	function g(t) {
		var e = t.data,
			n = d(t, e)
		n && X(t, e, n, l)
	}
	function h(t) {
		var e = t.data,
			n = c(t.changedTouches, e.identifier)
		n && l(e.identifier)
	}
	function l(t) {
		L(document, '.' + t, g), L(document, '.' + t, h)
	}
	function X(t, e, n, a) {
		var i = n.pageX - e.startX,
			o = n.pageY - e.startY
		C * C > i * i + o * o || y(t, e, n, i, o, a)
	}
	function Y() {
		return (this._handled = a), !1
	}
	function w(t) {
		t._handled()
	}
	function y(t, e, n, a, i, o) {
		{
			var r, u
			e.target
		}
		;(r = t.targetTouches),
			(u = t.timeStamp - e.timeStamp),
			(e.type = 'movestart'),
			(e.distX = a),
			(e.distY = i),
			(e.deltaX = a),
			(e.deltaY = i),
			(e.pageX = n.pageX),
			(e.pageY = n.pageY),
			(e.velocityX = a / u),
			(e.velocityY = i / u),
			(e.targetTouches = r),
			(e.finger = r ? r.length : 1),
			(e._handled = Y),
			(e._preventTouchmoveDefault = function () {
				t.preventDefault()
			}),
			N(e.target, e),
			o(e.identifier)
	}
	function T(t) {
		var e = t.data.timer
		;(t.data.touch = t), (t.data.timeStamp = t.timeStamp), e.kick()
	}
	function S(t) {
		var e = t.data.event,
			n = t.data.timer
		k(),
			F(e, n, function () {
				setTimeout(function () {
					L(e.target, 'click', i)
				}, 0)
			})
	}
	function k() {
		L(document, Q.move, T), L(document, Q.end, S)
	}
	function _(t) {
		var e = t.data.event,
			n = t.data.timer,
			a = d(t, e)
		a &&
			(t.preventDefault(),
			(e.targetTouches = t.targetTouches),
			(t.data.touch = a),
			(t.data.timeStamp = t.timeStamp),
			n.kick())
	}
	function q(t) {
		var e = t.data.event,
			n = t.data.timer,
			a = c(t.changedTouches, e.identifier)
		a && (A(e), F(e, n))
	}
	function A(t) {
		L(document, '.' + t.identifier, _), L(document, '.' + t.identifier, q)
	}
	function D(t, e, n) {
		var a = n - t.timeStamp
		;(t.type = 'move'),
			(t.distX = e.pageX - t.startX),
			(t.distY = e.pageY - t.startY),
			(t.deltaX = e.pageX - t.pageX),
			(t.deltaY = e.pageY - t.pageY),
			(t.velocityX = 0.3 * t.velocityX + (0.7 * t.deltaX) / a),
			(t.velocityY = 0.3 * t.velocityY + (0.7 * t.deltaY) / a),
			(t.pageX = e.pageX),
			(t.pageY = e.pageY)
	}
	function F(t, e, n) {
		e.end(function () {
			return (t.type = 'moveend'), N(t.target, t), n && n()
		})
	}
	function R() {
		return K(this, 'movestart.move', w), !0
	}
	function x() {
		return (
			L(this, 'dragstart drag', o),
			L(this, 'mousedown touchstart', r),
			L(this, 'movestart', w),
			!0
		)
	}
	function b(t) {
		'move' !== t.namespace &&
			'moveend' !== t.namespace &&
			(K(this, 'dragstart.' + t.guid + ' drag.' + t.guid, o, e, t.selector),
			K(this, 'mousedown.' + t.guid, r, e, t.selector))
	}
	function j(t) {
		'move' !== t.namespace &&
			'moveend' !== t.namespace &&
			(L(this, 'dragstart.' + t.guid + ' drag.' + t.guid),
			L(this, 'mousedown.' + t.guid))
	}
	var C = 6,
		K = t.event.add,
		L = t.event.remove,
		N = function (e, n, a) {
			t.event.trigger(n, a, e)
		},
		O = (function () {
			return (
				window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				window.oRequestAnimationFrame ||
				window.msRequestAnimationFrame ||
				function (t) {
					return window.setTimeout(function () {
						t()
					}, 25)
				}
			)
		})(),
		z = { textarea: !0, input: !0, select: !0, button: !0 },
		Q = { move: 'mousemove', cancel: 'mouseup dragstart', end: 'mouseup' },
		B = { move: 'touchmove', cancel: 'touchend', end: 'touchend' }
	;(t.event.special.movestart = {
		setup: R,
		teardown: x,
		add: b,
		remove: j,
		_default: function (t) {
			function a() {
				D(o, r.touch, r.timeStamp), N(t.target, o)
			}
			var o, r
			t._handled() &&
				((o = {
					target: t.target,
					startX: t.startX,
					startY: t.startY,
					pageX: t.pageX,
					pageY: t.pageY,
					distX: t.distX,
					distY: t.distY,
					deltaX: t.deltaX,
					deltaY: t.deltaY,
					velocityX: t.velocityX,
					velocityY: t.velocityY,
					timeStamp: t.timeStamp,
					identifier: t.identifier,
					targetTouches: t.targetTouches,
					finger: t.finger,
				}),
				(r = { event: o, timer: new n(a), touch: e, timeStamp: e }),
				t.identifier === e
					? (K(t.target, 'click', i),
					  K(document, Q.move, T, r),
					  K(document, Q.end, S, r))
					: (t._preventTouchmoveDefault(),
					  K(document, B.move + '.' + t.identifier, _, r),
					  K(document, B.end + '.' + t.identifier, q, r)))
		},
	}),
		(t.event.special.move = {
			setup: function () {
				K(this, 'movestart.move', t.noop)
			},
			teardown: function () {
				L(this, 'movestart.move', t.noop)
			},
		}),
		(t.event.special.moveend = {
			setup: function () {
				K(this, 'movestart.moveend', t.noop)
			},
			teardown: function () {
				L(this, 'movestart.moveend', t.noop)
			},
		}),
		K(document, 'mousedown.move', m),
		K(document, 'touchstart.move', p),
		'function' == typeof Array.prototype.indexOf &&
			!(function (t) {
				for (var e = ['changedTouches', 'targetTouches'], n = e.length; n--; )
					-1 === t.event.props.indexOf(e[n]) && t.event.props.push(e[n])
			})(t)
})

$(function () {
	$('.twentytwenty-container').twentytwenty()
})

$(window).load(function () {
	$('#beforeafter').twentytwenty()
})
3 Likes

AMAZING! Thank you for your reply, that worked perfectly. @sarwech you’re a star :clap::star_struck:

1 Like

Awesome! Happy to help :slight_smile:

@ashley-rose @sarwech I tried entering the code but it still does not work. Here is my site red only link: Webflow - Pristine Web Design

Never mind, I forgot the “<” :joy:

1 Like