Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Circular Image Gallery:
<style>
.mdw-3d-circle-gallery-area{
--radius: 250;
--mobile-radius: 140;
--repeat: 8;
--drag-speed: 3;
}
.mdw-3d-circle-gallery-area{
user-select: none;
}
.mdw-3d-circle-gallery{
perspective: 1000px;
}
.mdw-3d-circle-gallery > .e-con{
opacity: 0;
z-index: 1;
transform: scale(0.7) rotateY(60deg) rotateX(30deg);
transition: none;
}
.mdw-3d-circle-gallery > .e-con.active{
opacity: 1;
z-index: 2;
transform: none;
}
.mdw-3d-circle-gallery-area.anim .mdw-3d-circle-gallery > .e-con{
transition: all 0.25s ease-in-out;
}
.mdw-3d-circle-gallery-area.hovering .mdw-3d-circle-gallery > .e-con{
transition: none;
}
.mdw-3d-circle-gallery-circle{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 30px;
perspective: 1000px;
}
.mdw-3d-circle-gallery-circle img{
height: 100%;
width: 100%;
background: #b0b0b0;
object-fit: cover;
position: absolute;
transform: translate(var(--x,0), var(--y, 0)) rotateX(0deg) rotateY(var(--r,0deg));
opacity: var(--o);
border-radius: 5px;
transition: all 0.25s ease-in-out;
}
.mdw-3d-circle-gallery-circle img.active{
transform: translate(var(--x,0), var(--y, 0)) rotateX(0deg) rotateY(var(--r,0deg)) scale(1.2);
}
.mdw-3d-circle-gallery-area.dragging .mdw-3d-circle-gallery-circle img{
transition: none;
}
.mdw-3d-circle-gallery-area p{
margin-bottom: 0;
}
.mdw-3d-circle-gallery-area a:focus{
outline: none;
}
html:not(.elementor-html) .mdw-3d-circle-gallery-area .elementor-widget-html{
display: none;
}
@media (max-width: 1024px){
.mdw-no-position-tablet{
position: static !important;
}
}
@media (max-width: 767px){
.mdw-3d-circle-gallery-circle{
width: 30px;
height: 18px;
}
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!MDWNonce115){
var MDWNonce115 = true
;(function($){
var selector = '.mdw-3d-circle-gallery-area'
$(document).ready(function(){
$(selector).each(function(){
var $this = $(this),
container = $this.find('.mdw-3d-circle-gallery > .e-con'),
radius,
repeat,
speed,
desktopRadius,
mobileRadius,
total,
startAngle,
len = container.length,
images = [],
offset,
prevOffset,
dragging = false,
rotation = 0,
prevCoordinate = 0,
currentCoordinate,
currentItem = 0,
currentImage = 0,
clickLock = false,
renderLock = false
function getCSS(el, prop, def){
var val = getComputedStyle(el[0]).getPropertyValue(prop).trim()
return val ? val.trim() : def
}
function render(){
for(i=0; i<total; i++){
var angleD = i*360/total + offset,
angleR = angleD * Math.PI/180,
x = radius * Math.cos(angleR),
y = radius * Math.sin(angleR)
opacity = Math.abs(Math.cos(angleR))
$this.find('.mdw-3d-circle-gallery-circle img').eq(i).get(0).style.setProperty('--x', x+'px')
$this.find('.mdw-3d-circle-gallery-circle img').eq(i).get(0).style.setProperty('--y', y+'px')
$this.find('.mdw-3d-circle-gallery-circle img').eq(i).get(0).style.setProperty('--r', angleD+'deg')
$this.find('.mdw-3d-circle-gallery-circle img').eq(i).get(0).style.setProperty('--o', opacity)
}
}
function init(){
speed = parseFloat(getCSS($this, '--drag-speed', 3))*0.1
desktopRadius = parseFloat(getCSS($this, '--radius', 250))
mobileRadius = parseFloat(getCSS($this, '--mobile-radius', 140))
radius = $(window).width() > 767 ? desktopRadius : mobileRadius
repeat = parseFloat(getCSS($this, '--repeat', 1))
total = len*repeat
offset = -90 - 180/total
prevOffset = offset
$this[0].style.setProperty('--total-amount', len)
container.eq(0).addClass('active')
container.each(function(i){
images.push($(this).find('img').attr('src'))
})
$this.find('.mdw-3d-circle-gallery').append('<div class="mdw-3d-circle-gallery-circle"></div>')
for(i=0; i<total; i++){
$this.find('.mdw-3d-circle-gallery-circle').append('<img src="' + images[i%len] + '"/>')
}
render()
setTimeout(function(){
$this.addClass('anim')
},100)
}
init()
$this.find('.mdw-3d-circle-gallery-circle img').hover(function(e){
if(dragging) return
var i = $(this).index()
currentImage = i
currentItem = currentImage%len
container.removeClass('active')
container.eq(currentItem).addClass('active')
$this.find('img').removeClass('active')
$(this).addClass('active')
$this.addClass('hovering')
}, function(){
$this.find('img').removeClass('active')
$this.removeClass('hovering')
})
$this.find('img, a').on('dragstart', function(e){
e.preventDefault()
})
function getAngle(e){
var currentX = e.type == 'mousemove' || e.type == 'mousedown' ? e.clientX : e.originalEvent.touches[0].clientX,
currentY = e.type == 'mousemove' || e.type == 'mousedown' ? e.clientY : e.originalEvent.touches[0].clientY,
finalAngle
currentX -= $this.outerWidth()/2
currentY += $(window).scrollTop() - $this.offset().top - $this.outerHeight()/2
currentY = -currentY
var angleT = Math.atan(Math.abs(currentY/currentX))*180/Math.PI,
angle = angleT
if(currentX >= 0 && currentY >= 0){
angle = angleT
currentCoordinate = 0
}
if(currentX < 0 && currentY >= 0){
angle = 180 - angleT
currentCoordinate = 1
}
if(currentX <= 0 && currentY < 0){
angle = 180 + angleT
currentCoordinate = 2
}
if(currentX > 0 && currentY < 0){
angle = 360 - angleT
currentCoordinate = 3
}
if(prevCoordinate==3 && currentCoordinate==0){ rotation += 1 }
if(prevCoordinate==0 && currentCoordinate==3){ rotation -= 1 }
finalAngle = rotation*360 + angle
prevCoordinate = currentCoordinate
return finalAngle
}
function grab(e){
dragging = true
startAngle = getAngle(e)
$this.addClass('dragging')
}
function drag(e){
if(dragging){
var angle = getAngle(e)
angleDiff = angle - startAngle
offset = -1*angleDiff*speed+prevOffset
if (!renderLock) {
renderLock = true
requestAnimationFrame(function(){
render()
renderLock = false
})
}
}
}
function leave(e){
if(dragging) {
dragging = false
rotation = 0
prevOffset = offset
$this.removeClass('dragging')
}
}
$this.on('mousedown', grab)
$this.on('touchstart', grab)
$this.on('mousemove', drag)
$this.on('touchmove', drag)
$this.on('mouseup', leave)
$this.on('mouseleave', leave)
$this.on('touchend', leave)
function changeSlide(e, next = true){
e.preventDefault()
if(clickLock) return
clickLock = true
currentImage = next ? currentImage+1 : currentImage-1
if(currentImage >= total) currentImage = 0
if(currentImage < 0) currentImage = total -1
currentItem = currentImage%len
container.removeClass('active')
container.eq(currentItem).addClass('active')
offset = next ? offset+360/total : offset-360/total
prevOffset = offset
render()
setTimeout(function(){
clickLock = false
},0.25*1000+10)
}
$this.find('.mdw-3d-circle-gallery-prev a').on('click', function(e){
changeSlide(e, false)
})
$this.find('.mdw-3d-circle-gallery-next a').on('click', function(e){
changeSlide(e)
})
$(window).on('load resize', function(){
radius = $(window).width() > 767 ? desktopRadius : mobileRadius
render()
})
})
})
})(jQuery)
}
</script>
