Как сделать слайдер «До-После» в зеро блоке Tilda?
Значения, которые были введены
1. Чтобы в слайдере отображались необходимые фотографии, необходимо добавить на страницу галерею GL12 и загрузить в неё свои картинки. Далее копируешь их ссылки и вставляешь в генератор в указанные поля. Формат файла советуем использовать svg или png;
  • «Ссылка на картинку слева» — Добавляешь ссылку на фотографию, которая будет располагаться слева;
  • «Ссылка на картинку справа» — Добавляешь ссылку на фотографию, которая будет располагаться справа;
  • «border-radius (px)» — Настраиваешь скругление слайдера. Учитывай, что сильно большой радиус может обрезать подсказки на слайдере;
  • «Подпись картинки слева» и «Подпись картинки справа» — Указываем подписи на картинках, если это нужно;
  • Настраиваешь цвет и ширину полосы между фотографиями в полях «Цвет полосы» и «Ширина полосы (px)»
  • Указываешь в поле хочешь ли ты «Показывать шейп между стрелками?»
  • Если да, то настраиваешь «Цвет шейпа и стрелок»
  • «Настройки стрелок» — Настраиваешь Размер стрелки, Расстояние от центральной линии, Расстояние от центральной линии при наведении, Скорость анимации при наведении.

2. Копируем сгенерированный код и вставляем у себя в Зеро-блоке в элемент html.
Размеры слайдера будут соответствовать размеру html элемента

Имей в виду:

  • Рекомендуем загружать изначально изображения с такими же размерами сторон, как и html элемент внутри зеро блока.
  • Рекомендуем загружать векторные изображения не на прозрачном фоне, чтобы избежать наслаивания изображений. Загружайте изображения с таким же цветом фона, как фон блока.
Як на картинке
<!--NOLIM--><!--NLM076--><!--settings{"firstImage":"https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png","secondImage":"https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png","borderRadius":"20","leftText":"Winter","rightText":"Summer","stripColor":"#ff1f1f","stripWidth":"2","showShape":"0","shapeArrowsColor":"#00cc03","arrowsSettings":{"arrowSize":"8","marginFromCenter":"10","marginFromCenterOnHover":"8","transitionDuration":"0.2"}}settingsend--><!--ts1741859006453ts--> <div class="t410 nolimnlm76" style="height: inherit; width: inherit;" nlm076-slider-id="959566"> <div class="bgNolimSlider" style="border-radius: 20px; background: url(https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png) center no-repeat; -webkit-background-size: cover; background-size: cover; width:inherit; height: inherit; z-index: 3; position:absolute;"></div> <div class="t410__wrapper" data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png" data-juxtapose-imgdescr-first="Winter" data-juxtapose-imgalt-first="" data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png" data-juxtapose-imgdescr-second="Summer" data-juxtapose-imgalt-second="" style="height: inherit;"> <div id="t410-juxtapose__" class="juxtapose" style="height: inherit; width: inherit;"> </div> </div> </div> <link rel="stylesheet" href="https://static.tildacdn.one/css/juxtapose.css" type="text/css" media="all" onload="this.media='all';"> <script> (function (document, window) { var juxtapose = { sliders: [], OPTIMIZATION_ACCEPTED: 1, OPTIMIZATION_WAS_CONSTRAINED: 2 }; function Graphic(properties, slider) { var self = this; this.image = new Image; this.loaded = false; this.image.onload = function () { self.loaded = true; slider._onLoaded(); }; this.image.src = properties.src; this.label = properties.label || false; this.credit = properties.credit || false; } function getNaturalDimensions(DOMelement) { if (DOMelement.naturalWidth && DOMelement.naturalHeight) { return { width: DOMelement.naturalWidth, height: DOMelement.naturalHeight }; } var img = new Image; img.src = DOMelement.src; return { width: img.width, height: img.height }; } function getImageDimensions(img) { var dimensions = { width: getNaturalDimensions(img).width, height: getNaturalDimensions(img).height, aspect: function () { return this.width / this.height; } }; return dimensions; } function addClass(element, c) { if (element !== null) { if (element.classList) { element.classList.add(c); } else { element.className += ' ' + c; } } } function removeClass(element, c) { element.className = element.className.replace(/(\S+)\s*/g, function (w, match) { if (match === c) { return ''; } return w; }).replace(/^\s+/, ''); } function setText(element, text) { if (document.body.textContent) { element.textContent = text; } else { element.innerText = text; } } function getComputedWidthAndHeight(element) { if (window.getComputedStyle) { return { width: parseInt(getComputedStyle(element).width, 10), height: parseInt(getComputedStyle(element).height, 10) }; } else { w = element.getBoundingClientRect().right - element.getBoundingClientRect().left; h = element.getBoundingClientRect().bottom - element.getBoundingClientRect().top; return { width: parseInt(w, 10) || 0, height: parseInt(h, 10) || 0 }; } } function getPageX(e) { var pageX; if (e.pageX) { pageX = e.pageX; } else if (e.touches) { pageX = e.touches[0].pageX; } else { pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; } return pageX; } function getPageY(e) { var pageY; if (e.pageY) { pageY = e.pageY; } else if (e.touches) { pageY = e.touches[0].pageY; } else { pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return pageY; } function checkZoom(sld) { let myZoom = 1; let slider = sld.closest(".tn-elem"); if (window.isFirefox || window.isOpera) { let scaleWrapper = slider.querySelector(".tn-atom__scale-wrapper"); if (scaleWrapper) { myZoom = scaleWrapper.style.transform.replace(/[^0-9,.]/g,""); let int2 = setInterval(function() { scaleWrapper = slider.querySelector(".tn-atom__scale-wrapper"); let z1 = scaleWrapper.style.transform.replace(/[^0-9,.]/g,""); if (z1 != myZoom) { myZoom = scaleWrapper.style.transform.replace(/[^0-9,.]/g,""); } }, 100); } } else { if (slider.style.zoom != "") { myZoom = slider.style.zoom; let int2 = setInterval(function() { let z1 = slider.style.zoom; if (z1 != myZoom) { myZoom = slider.style.zoom; } }, 10); } } return myZoom; } function getLeftPercent(slider, input) { 						if (typeof input === 'string' || typeof input === 'number') { 							leftPercent = parseInt(input, 10); 						} else { 							var sliderRect = slider.getBoundingClientRect(); 							var offset = { 								top: sliderRect.top + (window.pageYOffset || document.documentElement.scrollTop), 								left: sliderRect.left + (window.pageXOffset || document.documentElement.scrollLeft) 							}; 							let myZoom = checkZoom(slider); 							var pageX = getPageX(input); 							var relativeX = (pageX - offset.left) / myZoom; 							var width = slider.offsetWidth; 							leftPercent = relativeX / width * 100; 						} 						return leftPercent; 					} 					function getTopPercent(slider, input) { 						if (typeof input === 'string' || typeof input === 'number') { 							topPercent = parseInt(input, 10); 						} else { 							var sliderRect = slider.getBoundingClientRect(); 							var offset = { 								top: sliderRect.top + (window.pageYOffset || document.documentElement.scrollTop), 								left: sliderRect.left + (window.pageXOffset || document.documentElement.scrollLeft) 							}; 							let myZoom = checkZoom(slider); 							var pageY = getPageY(input); 							var relativeY = (pageY - offset.top) / myZoom; 							var height = slider.offsetHeight; 							topPercent = relativeY / height * 100; 						} 						return topPercent; 					} var BOOLEAN_OPTIONS = { animate: true, showLabels: true, showCredits: true, makeResponsive: true }; function interpret_boolean(x) { if (typeof x != 'string') { return Boolean(x); } return !(x === 'false' || x === ''); } function JXSlider(selector, images, options) { this.selector = selector; var i; this.options = { animate: true, showLabels: true, showCredits: true, makeResponsive: true, startingPosition: '50%', mode: 'horizontal', callback: null }; for (i in this.options) { if (i in options) { if (i in BOOLEAN_OPTIONS) { this.options[i] = interpret_boolean(options[i]); } else { this.options[i] = options[i]; } } } if (images.length == 2) { this.imgBefore = new Graphic(images[0], this); this.imgAfter = new Graphic(images[1], this); } else { console.warn('The images parameter takes two Image objects.'); } if (this.imgBefore.credit || this.imgAfter.credit) { this.options.showCredits = true; } else { this.options.showCredits = false; } } JXSlider.prototype = { updateSlider: function (input, animate) { var leftPercent, rightPercent; if (this.options.mode === 'vertical') { leftPercent = getTopPercent(this.slider, input); } else { leftPercent = getLeftPercent(this.slider, input); } leftPercent = leftPercent.toFixed(2) + '%'; leftPercentNum = parseFloat(leftPercent); rightPercent = 100 - leftPercentNum + '%'; if (leftPercentNum > 0 && leftPercentNum < 100) { removeClass(this.handle, 'transition'); removeClass(this.rightImage, 'transition'); removeClass(this.leftImage, 'transition'); if (this.options.animate && animate) { addClass(this.handle, 'transition'); addClass(this.leftImage, 'transition'); addClass(this.rightImage, 'transition'); } if (this.options.mode === 'vertical') { this.handle.style.top = leftPercent; this.leftImage.style.height = leftPercent; this.rightImage.style.height = rightPercent; } else { this.handle.style.left = leftPercent; this.leftImage.style.width = leftPercent; this.rightImage.style.width = rightPercent; } this.sliderPosition = leftPercent; } }, getPosition: function () { return this.sliderPosition; }, displayLabel: function (element, labelText) { label = document.createElement('div'); label.className = 'jx-label'; label.setAttribute('tabindex', 0); setText(label, labelText); element.appendChild(label); }, displayCredits: function () { credit = document.createElement('div'); credit.className = 'jx-credit'; text = '<em>Photo Credits:</em>'; if (this.imgBefore.credit) { text += ' <em>Before</em> ' + this.imgBefore.credit; } if (this.imgAfter.credit) { text += ' <em>After</em> ' + this.imgAfter.credit; } credit.innerHTML = text; this.wrapper.appendChild(credit); }, setStartingPosition: function (s) { this.options.startingPosition = s; }, checkImages: function () { if (getImageDimensions(this.imgBefore.image).aspect() == getImageDimensions(this.imgAfter.image).aspect()) { return true; } else { return false; } }, calculateDims: function (width, height) { var ratio = getImageDimensions(this.imgBefore.image).aspect(); if (width) { height = width / ratio; } else if (height) { width = height * ratio; } return { width: width, height: height, ratio: ratio }; }, responsivizeIframe: function (dims) { if (dims.height < window.innerHeight) { if (dims.ratio >= 1) { this.wrapper.style.paddingTop = parseInt((window.innerHeight - dims.height) / 2) + 'px'; } } else if (dims.height > window.innerHeight) { dims = this.calculateDims(0, window.innerHeight); this.wrapper.style.paddingLeft = parseInt((window.innerWidth - dims.width) / 2) + 'px'; } if (this.options.showCredits) { dims.height -= 13; } return dims; }, setWrapperDimensions: function () { var wrapperWidth = getComputedWidthAndHeight(this.wrapper).width; var wrapperHeight = getComputedWidthAndHeight(this.wrapper).height; var dims = this.calculateDims(wrapperWidth, wrapperHeight); if (window.location !== window.parent.location && !this.options.makeResponsive) { dims = this.responsivizeIframe(dims); } this.wrapper.style.height = parseInt(dims.height) + 'px'; this.wrapper.style.width = parseInt(dims.width) + 'px'; }, optimizeWrapper: function (maxWidth) { var result = juxtapose.OPTIMIZATION_ACCEPTED; if (this.imgBefore.image.naturalWidth >= maxWidth && this.imgAfter.image.naturalWidth >= maxWidth) { this.wrapper.style.width = maxWidth + 'px'; result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED; } else if (this.imgAfter.image.naturalWidth < maxWidth) { this.wrapper.style.width = this.imgAfter.image.naturalWidth + 'px'; } else { this.wrapper.style.width = this.imgBefore.image.naturalWidth + 'px'; } this.setWrapperDimensions(); return result; }, _onLoaded: function () { if (this.imgBefore && this.imgBefore.loaded === true && this.imgAfter && this.imgAfter.loaded === true) { this.wrapper = document.querySelector(this.selector); if (this.wrapper === null) { return; } addClass(this.wrapper, 'juxtapose'); this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width; this.setWrapperDimensions(); this.slider = document.createElement('div'); this.slider.className = 'jx-slider'; this.wrapper.appendChild(this.slider); if (this.options.mode != 'horizontal') { addClass(this.slider, this.options.mode); } this.handle = document.createElement('div'); this.handle.className = 'jx-handle'; this.rightImage = document.createElement('div'); this.rightImage.className = 'jx-image jx-right'; this.rightImage.appendChild(this.imgAfter.image); this.leftImage = document.createElement('div'); this.leftImage.className = 'jx-image jx-left'; this.leftImage.appendChild(this.imgBefore.image); this.slider.appendChild(this.handle); this.slider.appendChild(this.leftImage); this.slider.appendChild(this.rightImage); this.leftArrow = document.createElement('div'); this.rightArrow = document.createElement('div'); this.control = document.createElement('div'); this.controller = document.createElement('div'); this.leftArrow.className = 'jx-arrow jx-left'; this.rightArrow.className = 'jx-arrow jx-right'; this.control.className = 'jx-control'; this.controller.className = 'jx-controller'; this.controller.setAttribute('tabindex', 0); this.controller.setAttribute('role', 'slider'); this.controller.setAttribute('aria-valuenow', 50); this.controller.setAttribute('aria-valuemin', 0); this.controller.setAttribute('aria-valuemax', 100); this.handle.appendChild(this.leftArrow); this.handle.appendChild(this.control); this.handle.appendChild(this.rightArrow); this.control.appendChild(this.controller); this._init(); } }, _init: function () { if (this.checkImages() === false) { console.warn(this, 'Check that the two images have the same aspect ratio for the slider to work correctly.'); } this.updateSlider(this.options.startingPosition, false); if (this.options.showLabels === true) { if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); } if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); } } if (this.options.showCredits === true) { this.displayCredits(); } var self = this; window.addEventListener('resize', function () { self.setWrapperDimensions(); }); var isMobile = false; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { isMobile = true; } if (!isMobile) { this.slider.addEventListener('mousedown', function (e) { e = e || window.event; e.preventDefault(); self.updateSlider(e, true); animate = true; this.addEventListener('mousemove', function (e) { e = e || window.event; e.preventDefault(); if (animate) { self.updateSlider(e, false); } }); this.addEventListener('mouseup', function (e) { e = e || window.event; e.preventDefault(); e.stopPropagation(); this.removeEventListener('mouseup', arguments.callee); animate = false; }); }); } this.handle.addEventListener('touchstart', function (e) { e = e || window.event; e.preventDefault(); e.stopPropagation(); self.updateSlider(e, true); this.addEventListener('touchmove', function (e) { e = e || window.event; e.preventDefault(); e.stopPropagation(); self.updateSlider(event, false); }); }); this.handle.addEventListener('keydown', function (e) { e = e || window.event; var key = e.which || e.keyCode; var ariaValue = parseFloat(this.style.left); if (key == 37) { ariaValue = ariaValue - 1; var leftStart = parseFloat(this.style.left) - 1; self.updateSlider(leftStart, false); self.controller.setAttribute('aria-valuenow', ariaValue); } if (key == 39) { ariaValue = ariaValue + 1; var rightStart = parseFloat(this.style.left) + 1; self.updateSlider(rightStart, false); self.controller.setAttribute('aria-valuenow', ariaValue); } }); this.leftImage.addEventListener('keydown', function (event) { var key = event.which || event.keyCode; if (key == 13 || key == 32) { self.updateSlider('90%', true); self.controller.setAttribute('aria-valuenow', 90); } }); this.rightImage.addEventListener('keydown', function (event) { var key = event.which || event.keyCode; if (key == 13 || key == 32) { self.updateSlider('10%', true); self.controller.setAttribute('aria-valuenow', 10); } }); juxtapose.sliders.push(this); if (this.options.callback && typeof this.options.callback == 'function') { this.options.callback(this); } } }; juxtapose.JXSlider = JXSlider; window.juxtapose = juxtapose; })(document, window); (function (win, doc) { if (win.addEventListener) return; function docHijack(p) { var old = doc[p]; doc[p] = function (v) { return addListen(old(v)); }; } function addEvent(on, fn, self) { return (self = this).attachEvent('on' + on, function (e) { var e = e || win.event; e.preventDefault = e.preventDefault || function () { e.returnValue = false; }; e.stopPropagation = e.stopPropagation || function () { e.cancelBubble = true; }; fn.call(self, e); }); } function addListen(obj, i) { if (i = obj.length) while (i--) obj[i].addEventListener = addEvent; else obj.addEventListener = addEvent; return obj; } addListen([doc, win]); if ('Element' in win) win.Element.prototype.addEventListener = addEvent; else { doc.attachEvent('onreadystatechange', function () { addListen(doc.all); }); docHijack('getElementsByTagName'); docHijack('getElementById'); docHijack('createElement'); addListen(doc.all); } })(window, document); </script> <script> (function (){ function t410_init(id, blk) { var el = document.querySelector('#' + blk + ' [data-elem-id="' + id+'"]'); var firstimgurl = el.querySelector(".t410__wrapper").getAttribute("data-juxtapose-imgurl-first"); var firstimgdescr = el.querySelector(".t410__wrapper").getAttribute("data-juxtapose-imgdescr-first"); var firstimgalt = el.querySelector(".t410__wrapper").getAttribute("data-juxtapose-imgalt-first"); var secondimgurl = el.querySelector(".t410__wrapper").getAttribute("data-juxtapose-imgurl-second"); var secondimgdescr = el.querySelector(".t410__wrapper").getAttribute("data-juxtapose-imgdescr-second"); var secondimgalt = el.querySelector(".t410__wrapper").getAttribute("data-juxtapose-imgalt-second"); t410_onObjLoad('juxtapose', function() { new juxtapose.JXSlider('#' + blk + ' [data-elem-id="' + id + '"] #t410-juxtapose__', [{ src: firstimgurl , label: firstimgdescr }, { src: secondimgurl , label: secondimgdescr }], { animate: !1 , showLabels: !0 , showCredits: !1 , startingPosition: '50%' , makeResponsive: !0 , callback: function() { if (firstimgalt) { el.querySelector('.t410__wrapper .jx-image.jx-left img').setAttribute('alt', firstimgalt) } if (secondimgalt) { el.querySelector('.t410__wrapper .jx-image.jx-right img').setAttribute('alt', secondimgalt) } if (window.isMobile) { el.querySelector('.t410__wrapper').insertAdjacentHTML('beforeend', '<div class="t410__mobile_left"></div><div class="t410__mobile_right"></div>'); var hanlerWidth = el.querySelector('.t410__wrapper .jx-handle').offsetWidth, leftSide = el.querySelector('.t410__wrapper .jx-image.jx-left'), rightSide = el.querySelector('.t410__wrapper .jx-image.jx-right'), leftWidth = leftSide.offsetWidth - hanlerWidth / 2, rightWidth = rightSide.offsetWidth - hanlerWidth / 2, wrapper = el.querySelector('.t410__wrapper'), mobileLeft = el.querySelector('.t410__mobile_left'), mobileRight = el.querySelector('.t410__mobile_right'); mobileLeft.style.width = leftWidth + 'px'; mobileRight.style.width = rightWidth + 'px'; wrapper.addEventListener('touchend', function() { leftWidth = leftSide.offsetWidth - hanlerWidth / 2; rightWidth = rightSide.offsetWidth - hanlerWidth / 2; mobileLeft.style.width = leftWidth + 'px'; mobileRight.style.width = rightWidth + 'px'; }); } } }); let inter = setInterval(function(){ let sld = document.querySelectorAll('#' + blk + ' [data-elem-id="' + id + '"] .jx-right img'); if (sld.length > 0) { clearInterval(inter); var left = document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .t410__wrapper').getAttribute("data-juxtapose-imgurl-first"); var right = document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .t410__wrapper').getAttribute("data-juxtapose-imgurl-second"); let style = window.getComputedStyle(document.querySelector('#' + blk + ' [data-elem-id="' + id + '"]')); 			 var width = style.width.replace("px", ""); document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-left').insertAdjacentHTML('afterbegin', '<div style="left: 0; background-position: center center;background-size: cover;background-repeat: no-repeat; background-image: url(\'https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png\'); height: 100%;z-index: 5;position: absolute;max-height: none;max-width: none;max-height: initial;max-width: initial; width:'+width+'px"></div>'); document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-right').insertAdjacentHTML('afterbegin', '<div style="right: 0;bottom: 0; background-position: center center;background-size: cover;background-repeat: no-repeat; background-image: url(\'https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png\'); height: 100%;z-index: 5;position: absolute;max-height: none;max-width: none;max-height: initial;max-width: initial; width:'+width+'px"></div>'); let img = document.querySelectorAll('#' + blk + ' [data-elem-id="' + id + '"] img'); img.forEach(function(item) { item.remove(); }); } },50); }); let dispchng = el.querySelector('.t410'); dispchng.addEventListener('displayChanged',function(){ window.juxtapose.sliders.forEach(function(obj) { if (obj.selector === '#t410-juxtapose__' + recid) { obj.setWrapperDimensions(); return } }); }) }; function t_ready(t) { "loading" != document.readyState ? t() : document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange", function() { "loading" != document.readyState && t() }) } t_ready(function() { let opt = setInterval(function(){ let slds = document.querySelectorAll('[nlm076-slider-id="959566"] [data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png"][data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png"]'); if (slds.length > 0) { clearInterval(opt); t410_onObjLoad('juxtapose', function() { slds.forEach(function(item, index) { let parent = item.closest('.nolimnlm76'); if (parent) { parent.classList.remove('nolimnlm76'); let id = item.closest('[data-elem-id]').getAttribute('data-elem-id'); let blk = item.closest('.r').getAttribute('id'); t410_init(id, blk); window.addEventListener("resize", function() { let sldWidth = item.closest('.tn-elem').style.width; let int = setInterval(function() { let sldWidth2 = item.closest('.tn-elem').style.width; if (sldWidth != sldWidth2) { clearInterval(int); document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-right').firstChild.style.width = sldWidth2; document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-left').firstChild.style.width = sldWidth2; } },10); setTimeout(function() { clearInterval(int); },2000); }); } }); }); } },50); }); function t410_onObjLoad(objName, okFunc, time) { if (typeof window[objName] === 'object') { okFunc() } else { let timerId = setTimeout(function checkFuncExist() { if (typeof window[objName] === 'object') { okFunc(); return } timerId = setTimeout(checkFuncExist, time || 100) }); }; }; }()); </script> <style> [data-elem-type="html"] #t410-juxtapose__, [data-elem-type="html"] .tn-atom{ height: inherit !important; width: inherit !important; } [nlm076-slider-id="959566"] [data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png"][data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png"] .jx-control{ background-color: #ff1f1f!important; width: 2px!important; position: relative; } [nlm076-slider-id="959566"] [data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png"][data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png"] .jx-slider{ border-radius: 20px!important; } [nlm076-slider-id="959566"] [data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png"][data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png"] .jx-arrow.jx-left{ z-index:1; border-color: transparent #00cc03 transparent transparent; } [nlm076-slider-id="959566"] [data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png"][data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png"] .jx-arrow.jx-right{ border-color: transparent transparent transparent #00cc03 ; } [nlm076-slider-id="959566"] [data-juxtapose-imgurl-first="https://static.tildacdn.one/tild6635-6235-4135-b363-343864316132/image-1.png"][data-juxtapose-imgurl-second="https://static.tildacdn.one/tild3234-3663-4065-b761-626639333332/image.png"] .jx-controller{ background-color: #00cc03; margin-left: auto; margin-right: auto; left: calc(50% - 4.5px); } [nlm076-slider-id="959566"] div.jx-arrow.jx-left { left: calc(-10px + 12px) !important; border-width: 8px 8px 8px 0 !important; } [nlm076-slider-id="959566"] div.jx-arrow.jx-right { right: calc(-10px + 12px) !important; border-width: 8px 0 8px 8px !important; } [nlm076-slider-id="959566"] div.jx-handle:hover div.jx-arrow.jx-left, [nlm076-slider-id="959566"] div.jx-handle:active div.jx-arrow.jx-left { left: calc(-8px + 12px) !important; } [nlm076-slider-id="959566"] div.jx-handle:hover div.jx-arrow.jx-right, [nlm076-slider-id="959566"] div.jx-handle:active div.jx-arrow.jx-right { right: calc(-8px + 12px) !important; } [nlm076-slider-id="959566"] div.jx-arrow { transition: all 0.2s ease !important; } </style>