Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Product Slider:
<style>
/* For Desktop & Tablet Devices */
.mdw-slider-142{
--slide-width: 250;
--active-slide-width: 350;
--slide-gap: 60;
}
/* For Mobile Devices */
@media(max-width: 767px){
.mdw-slider-142{
--slide-width: 120;
--active-slide-width: 180;
--slide-gap: 30;
}
}
.mdw-hidden{
display: none !important;
}
.mdw-no-image{
background-color: #F8F8F8;
}
.mdw-no-image img{
opacity: 0;
}
.mdw-slider-142-main{
overflow: hidden;
--show-slide: 7; /* Must be odd number */
width: calc( (var(--active-slide-width,350) + (var(--show-slide) - 1) * (var(--slide-width,250) + var(--slide-gap,60))) * 1px);
}
.mdw-slider-142-main div{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: calc( 1px * var(--slide-width,250));
height: calc( 1px * var(--slide-width,250));
}
.mdw-slider-142.mdw-loaded .mdw-slider-142-main div{
transition: all 0.75s ease;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-main div{
transform: translateX(calc(var(--index,0) * 500px)) !important;
opacity: 0;
}
.mdw-slider-142-main div.mdw-center-slide{
height: calc(var(--active-slide-width,350) * 1px);
width: calc(var(--active-slide-width,350) * 1px);
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-main div.mdw-center-slide{
transform: scale(0.75) !important;
}
.mdw-slider-142-main img{
width: 100%;
height: 100%;
-webkit-user-drag: none;
user-select: none;
object-fit: cover;
}
.mdw-slider-142-main div.mdw-center-slide,
.mdw-slider-142-view,
.mdw-slider-142-prev,
.mdw-slider-142-next,
.mdw-slider-142-control > .e-con{
cursor: pointer;
}
.mdw-slider-142 .mdw-slider-142-background{
opacity: 0;
height: 100%;
pointer-events: none;
transition: all 1s cubic-bezier(0.65,0,0.35,1) !important;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-background{
opacity: 1;
}
.mdw-slider-142-popup{
backdrop-filter: blur(20px);
transition: transform 0.75s cubic-bezier(0.65,0,0.35,1) !important;
}
.mdw-slider-142:not(.mdw-popup-active) .mdw-slider-142-popup{
transform: translateY(100vh);
}
html.elementor-html .mdw-slider-142-popup{
transform: none !important;
left: 0 !important;
bottom: 0 !important;
top: unset !important;
}
.mdw-slider-142-control{
user-select: none;
transition: all 0.5s ease-in-out !important;
}
.mdw-slider-142 .mdw-slider-142-control:before,
.mdw-slider-142 .mdw-slider-142-control .e-con:before{
transition: all 0.75s cubic-bezier(0.65,0,0.35,1) !important;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-control:before{
transform: scale(0);
}
.mdw-slider-142-view,
.mdw-slider-142-prev,
.mdw-slider-142-next{
transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) 0.4s;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-view,
.mdw-slider-142.mdw-popup-active .mdw-slider-142-prev,
.mdw-slider-142.mdw-popup-active .mdw-slider-142-next{
pointer-events: none;
opacity: 0;
transition-delay: 0s;
}
.mdw-slider-142-prev .elementor-icon-wrapper,
.mdw-slider-142-next .elementor-icon-wrapper{
display: flex;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-control .e-con:before{
transform: scale(1.23);
}
.mdw-slider-142-control .elementor-widget-divider .elementor-divider-separator{
transform: scaleX(0);
transition: all 0.3s cubic-bezier(0.55,0.06,0.68,0.19) !important;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-control .elementor-widget-divider .elementor-divider-separator{
transform: scaleX(1);
transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
transition-delay: 0.2s !important;
}
.mdw-slider-142-control .elementor-widget-divider:nth-child(2) .elementor-divider-separator{
transition-delay: 0.05s !important;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-control .elementor-widget-divider:nth-child(2) .elementor-divider-separator{
transition-delay: 0.3s !important;
}
@media(min-width: 768px){
.mdw-slider-142{
height: var(--min-height, 100vh);
min-height: 800px;
max-height: 1000px;
}
}
@media(max-width: 767px){
.mdw-slider-142-background img{
transform: scale(1.2);
}
.mdw-slider-142-control{
transform: scale(0.7);
transform-origin: bottom;
}
.mdw-slider-142.mdw-popup-active .mdw-slider-142-control{
bottom: -15px;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
if(!MDWNonce142){
var MDWNonce142 = true
$(document).ready(function(){
var selector = '.mdw-slider-142'
$(selector).each(function(i){
var $this = $(this),
content = $this.find('.mdw-slider-142-content .e-con'),
len = content.length,
slider = $this.find('.mdw-slider-142-main'),
index = 0,
slides = [],
animating = false,
open = false,
total = parseFloat(slider.css('--show-slide').trim()) - 1,
startX = 0
dragged = false
function addSlide(r){
var i = (((r + index) % len) + len) % len,
c = content.eq(i),
src = c.find('.mdw-slider-142-image img').length ? c.find('.mdw-slider-142-image img').attr('src') : '/wp-content/plugins/elementor/assets/images/placeholder.png',
className = c.find('.mdw-slider-142-image img').length ? '' : 'mdw-no-image',
el = $(
`<div style="--index: ${r};">
<img src="${src}" alt="${c.find('.mdw-slider-142-title').text().trim()}" />
</div>`)
el.addClass(className)
slider.append(el)
slides.push({ el: el, r: r })
}
function updateSlider(){
var slideWidth = parseFloat($this.css('--slide-width').trim()),
activeSlideWidth = parseFloat($this.css('--active-slide-width').trim()),
slideGap = parseFloat($this.css('--slide-gap').trim())
$.each(slides, function(_, s){
if (s.r == 0){
s.el.addClass('mdw-center-slide')
}else{
s.el.removeClass('mdw-center-slide')
}
s.el.css({
transform: `translateX(${s.r*(slideWidth+slideGap)+Math.sign(s.r)*(activeSlideWidth-slideWidth)/2}px)`
})
})
}
function updateText(from, to){
var text = from.text().trim()
to.find('.elementor-heading-title').text(text)
text ? to.removeClass('mdw-hidden') : to.addClass('mdw-hidden')
}
function updateImage(from, to, altFrom){
var src
if(from.find('img').length){
src = from.find('img').attr('src')
to.removeClass('mdw-no-image')
}else{
src = '/wp-content/plugins/elementor/assets/images/placeholder.png'
to.addClass('mdw-no-image')
}
to.find('img').attr({ src: src, srcset: '', alt: altFrom.text().trim() })
}
function updatePopup(){
var i = ((index % len) + len) % len,
c = content.eq(i),
btnText = c.find('.mdw-slider-142-button a').text().trim() ? c.find('.mdw-slider-142-button a').text().trim() : 'View Details',
btnLink = c.find('.mdw-slider-142-button a').attr('href') ? c.find('.mdw-slider-142-button a').attr('href') : '#'
updateText(c.find('.mdw-slider-142-title'), $this.find('.mdw-slider-142-popup-title'))
updateText(c.find('.mdw-slider-142-category'), $this.find('.mdw-slider-142-popup-category'))
updateText(c.find('.mdw-slider-142-price'), $this.find('.mdw-slider-142-popup-price'))
updateImage(c.find('.mdw-slider-142-image'), $this.find('.mdw-slider-142-popup-image'), c.find('.mdw-slider-142-title'))
updateImage(c.find('.mdw-slider-142-image'), $this.find('.mdw-slider-142-background'), c.find('.mdw-slider-142-title'))
$this.find('.mdw-slider-142-popup-button a').text(btnText)
$this.find('.mdw-slider-142-popup-button a').attr('href', btnLink)
}
function togglePopup(){
if (animating) return
animating = true
if (!open) updatePopup()
$this.toggleClass('mdw-popup-active')
setTimeout(function(){
animating = false
open = !open
}, 750)
}
function removeSlide(r){
var i = slides.findIndex(function(s){ return s.r == r })
if (i != -1){
slides[i].el.remove()
slides.splice(i, 1)
}
}
function prev(){
if (animating || open) return
removeSlide(total)
$.each(slides, function(_, s){ s.el.css('--index', ++s.r) })
index--
addSlide(-total)
updateSlider()
}
function next(){
if (animating || open) return
removeSlide(-total)
$.each(slides, function(_, s){ s.el.css('--index', --s.r) })
index++
addSlide(total)
updateSlider()
}
function init(){
for(var i = -total; i <= total; i++) addSlide(i)
updateSlider()
setTimeout(function(){$this.addClass('mdw-loaded')},500)
}
init()
$this.find('.mdw-slider-142-view, .mdw-slider-142-control .e-con').on('click', togglePopup)
$this.find('.mdw-slider-142-prev').on('click', prev)
$this.find('.mdw-slider-142-next').on('click', next)
slider.on('click', 'div', function(){
if (dragged) return
var r = $(this).css('--index')
if(r == 0) togglePopup()
if(r == 0 || animating || open) return
for (var i = 0; i < Math.abs(r); i++) r > 0 ? next() : prev()
})
slider.on('mousedown touchstart', function(e){
if (animating || open) return
dragged = false
startX = e.pageX || e.originalEvent.touches[0].pageX
})
slider.on('mousemove touchmove', function(e){
var currentX = e.pageX || e.originalEvent.touches[0].pageX
if (Math.abs(currentX - startX) > 0) dragged = true
})
slider.on('mouseup touchend', function(e){
var endX = e.pageX || (e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0].pageX : 0),
diff = endX - startX
Math.abs(diff) > 0 && (diff > 0 ? prev() : next())
})
$(window).on('load resize', function(){
updateSlider()
})
})
})
}
</script>
