selector{ background: #fff; --background-speed: 0.5s; } selector .elementor-background-slideshow{ display: none; } selector .reboot-slider-background, selector .reboot-slider-background img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 1s ease-in-out; } selector .reboot-slider-background img{ object-fit: cover; opacity: 0; transform: scale(1.1); } selector .reboot-slider-background img.prev, selector .reboot-slider-background img.currentBackward, selector .reboot-slider-background img.currentForward{ opacity: 1; transform: scale(1.1); } selector .reboot-slider-background img.currentBackward, selector .reboot-slider-background img.currentForward{ z-index: 1; opacity: 1; animation: bgNext var(--background-speed) linear; transition: all 1s ease-in-out; transform: scale(1); } selector:before{ z-index: 2; } selector > .elementor-element{ z-index: 3; } selector .reboot-bar, selector .reboot-slider-left, selector .reboot-slider-right{ opacity: 0; transition: all 0.8s ease-in-out; } selector.loaded .reboot-bar, selector.loaded .reboot-slider-left, selector.loaded .reboot-slider-right{ opacity: 1; } /*selector .ds-slider-left a:focus,*/ /*selector .ds-slider-right a:focus{*/ /* outline: none !important;*/ /*}*/ @keyframes bgNext { 0% {opacity: 0; transform: scale(1.1);} 100% {opacity: 1; transform: scale(1);} } @media (min-width: 768px){ selector .reboot-bar, selector .reboot-slider-left, selector .reboot-slider-right{ position: relative; } } @media (max-width: 1380px) and (min-width: 768px){ selector{ padding-left: 4%; padding-right: 4%; } } @media (max-width: 767px){ selector .reboot-slider-left{ left: calc(50% - 300px/2) !important; } selector .reboot-slider-right{ right: calc(50% - 300px/2) !important; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter