How to Make a Rotating Images Effect in Elementor Using a JSON File
Adding a rotating images effect to your website enhances its visual appeal and engages visitors. Elementor makes it easy to implement this feature, especially with the help of a pre-designed JSON file. Follow this detailed guide to quickly create and customize a rotating images effect in Elementor.
<style>[class^='mdw-rotating-image-effect'] .elementor-widget-image,
[class*='mdw-rotating-image-effect'] .elementor-widget-image{
transition: none !important;
}
[class^='mdw-rotating-image-effect'] .mdw-rotating-images,
[class*='mdw-rotating-image-effect'] .mdw-rotating-images{
perspective: 1000px;
transition: none !important;
}
[class^='mdw-rotating-image-effect'] .elementor-widget-image img,
[class*='mdw-rotating-image-effect'] .elementor-widget-image img,
[class^='mdw-rotating-image-effect'] .elementor-widget-image a,
[class*='mdw-rotating-image-effect'] .elementor-widget-image a{
max-width: unset;
}
[class^='mdw-rotating-image-effect'] .mdw-rotating-image-content,
[class*='mdw-rotating-image-effect'] .mdw-rotating-image-content,
[class^='mdw-rotating-image-effect'] .mdw-rotating-images,
[class*='mdw-rotating-image-effect'] .mdw-rotating-images{
opacity: 0;
}
[class^='mdw-rotating-image-effect'].init .mdw-rotating-image-content,
[class*='mdw-rotating-image-effect'].init .mdw-rotating-image-content,
[class^='mdw-rotating-image-effect'].init .mdw-rotating-images,
[class*='mdw-rotating-image-effect'].init .mdw-rotating-images,
html.elementor-html .mdw-rotating-image-content,
html.elementor-html .mdw-rotating-images{
opacity: 1;
}</style> <script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script type="litespeed/javascript">if(!MDWNonce112){var MDWNonce112=!0;(function($){let selector='[class^="mdw-rotating-image-effect"], [class*="mdw-rotating-image-effect"]',options=[],isImageLoad=[],isWindowLoaded=!1,isAnimated=[],windowHeight,bottomView,topView
function imageStackEntrance($this,i){var breakPoint='768px',media=gsap.matchMedia()
media.add({isDesktop:`(min-width: ${breakPoint})`,isMobile:`(max-width: ${breakPoint})`,},(context)=>{var{isDesktop}=context.conditions,imageContainer=$this.find('.mdw-rotating-images'),content=$this.find('.mdw-rotating-image-content'),images=$this.find('.elementor-widget-image'),imageHeight=images.eq(0).height(),count=images.length,sliceAngle=(2*Math.PI)/count,radius1=options[i].initRadius+imageHeight/2,radius2=isDesktop?options[i].radiusDesktop:options[i].radiusMobile,cardFlip=options[i].flipCard
radius2-=options[i].initRadius
$this.addClass('init')
gsap.timeline().from(images,{y:$this.find('.mdw-rotating-images').height()/2+imageHeight*1.5,rotateX:-180,stagger:0.1,duration:0.5,opacity:0.8,scale:3,}).set(images,{transformOrigin:`center ${radius1 + imageHeight/2}px`,}).set(imageContainer,{transformStyle:'preserve-3d',}).to(images,{y:-radius1,duration:0.5,ease:'power1.out',}).to(images,{rotation:(index)=>index*360/count,rotateY:15,duration:1,ease:'power1.out',},'<').to(images,{rotation:(index)=>(index+1)*(360/count),x:(index)=>radius2*Math.sin((180-(index+1)*360/count)*Math.PI/180),y:(index)=>radius2*Math.cos((180-(index+1)*360/count)*Math.PI/180)-radius1}).to(images,{rotateY:180,duration:1,},'<').from(content,{opacity:0,filter:'blur(60px)',duration:1,},'<').to(images,{repeat:-1,duration:2,onRepeat:()=>{if(cardFlip){gsap.to(images[Math.floor(Math.random()*count)],{rotateY:'+=180',})}},}).to(imageContainer,{rotation:360,duration:20,repeat:-1,ease:'none',},'<-=2')})}
function triggerAnimation(e){if(e&&e.type=='load')isWindowLoaded=!0
if(!isWindowLoaded)return
$(selector).each(function(i){var $this=$(this),offset=$this[0].getBoundingClientRect(),offsetTop=offset.top,offsetBottom=offset.bottom
if(offsetTop<bottomView&&offsetBottom>topView&&!isAnimated[i]&&isImageLoad[i]&&isWindowLoaded){isAnimated[i]=!0
imageStackEntrance($this,i)}})}
function getValues(){$(selector).each(function(i){let $this=$(this)
className=$this.attr('class'),classNameIndex=className.indexOf('mdw-rotating-image-effect'),shortClass=className.substring(classNameIndex,className.indexOf(' ',classNameIndex)),values=shortClass.split('-')
options[i]={initRadius:50,radiusDesktop:170,radiusMobile:90,flipCard:!0}
values.forEach(function(value,index){if(value=='initradius'&&values[index+1]&&!isNaN(values[index+1])){options[i].initRadius=parseFloat(values[index+1])}
if(value=='radius'&&values[index+1]&&!isNaN(values[index+1])){options[i].radiusDesktop=parseFloat(values[index+1])}
if(value=='mobileradius'&&values[index+1]&&!isNaN(values[index+1])){options[i].radiusMobile=parseFloat(values[index+1])}
if(value=='noflip'){options[i].flipCard=!1}})})}
function init(){$(selector).each(function(i){isAnimated[i]=!1
isImageLoad[i]=!1
var imageCount=0,img=$(this).find('.mdw-rotating-images img')
img.each(function(){$(this).on('load',function(){imageCount++
if(imageCount==img.length){isImageLoad[i]=!0
triggerAnimation()}})
if(this.complete){$(this).trigger('load')}})
getValues()})}
function setValues(){windowHeight=$(window).height()
bottomView=(windowHeight/100)*50
topView=(windowHeight/100)*50}
$(document).ready(init)
$(window).on('load resize',setValues)
$(window).on('load scroll',triggerAnimation)})(jQuery)}</script>
Step-by-Step Guide to Add a Rotating Images Effect json file in Elementor
Step 1: Open the Header Editor in Elementor
To start, navigate to your WordPress dashboard and open the Elementor Theme Builder. Select the header section and click the edit option. This will open the header editor in Elementor.
Step 2: Add a New Container
In the header editor, click on the Add New Container button. This will serve as the base layout for your shopping header. You can adjust the container’s layout, such as its width and alignment, to suit your design preferences.
Step 3: Select the File Icon
Once your container is added, locate the File Icon in the Elementor editor. It usually appears as a small icon in the top toolbar when you select the container.
Step 4: Upload the JSON File
Click the File Icon, and a new window will pop up. Select the Upload button at the top of the window and navigate to where you saved the JSON file provided in this guide. Choose the file and upload it.
Step 5: Insert the JSON File
After uploading, select the uploaded JSON file and click the Insert button. Elementor will automatically populate the header container with the menu layout defined in the JSON file.
Step 6: Adjust the Rotating Image Settings
- Click on the Carousel Widget or rotating images element in the layout.
- Open the Advanced Tab to configure the rotation speed, direction, and transition effects.
- Update settings like autoplay, hover pause, and loop for a seamless experience.
Step 7: Preview and Save
Preview your page to ensure the rotating images effect is working as expected. If satisfied, click Update to save your changes.
How to Customize the Rotating Images Effect
1. Replace Placeholder Images
- Select each image in the rotating carousel.
- Click on the Replace Image option and upload your desired images.
2. Modify Rotation Speed and Direction
- In the Settings Tab, adjust the rotation speed (measured in milliseconds).
- Choose between clockwise or counterclockwise rotation.
3. Adjust Image Dimensions
Ensure all images have consistent dimensions to maintain a professional appearance.
