Miva - MMX Hero Slider Manipulations

00-add-custom-hero-banner-after-first-slide.js

// Add a new mmx-hero slide after the first slide
const slider = document.getElementById('mmx-hero-slider__mmx_heroslider');
const firstSlide = slider.querySelector('[slot="hero_slide"]');
const newSlideHTML = /*html*/`
	<mmx-hero
		slot="hero_slide"
		data-href="#foo"
		data-heading="This is the heading!"
		data-body="this is the body text"
		data-content-location="center"
		data-align="center"
		data-overlay-bg="color"
		data-overlay-bg-color="black"
		data-content-theme="dark"
	>
	</mmx-hero>
`;
firstSlide.insertAdjacentHTML('afterend', newSlideHTML);

01-add-new-second-slide.js

// Add a new mmx-hero slide with custom slotted content
const slider = document.getElementById('mmx-hero-slider__mmx_heroslider');
const firstSlide = slider.querySelector('[slot="hero_slide"]');
const newSlideHTML = /*html*/`
	<mmx-hero slot="hero_slide">
		<div slot="content">Custom Banner</div>
	</mmx-hero>
`;
firstSlide.insertAdjacentHTML('afterend', newSlideHTML);

02-replace-second-slide-with-new-slide.js

// Replace second slide with a new mmx-hero slide and custom slotted content
const slider = document.getElementById('mmx-hero-slider__mmx_heroslider');
const secondSlide = slider.querySelector('[slot="hero_slide"]:nth-child(2)');
const newSlideHTML = /*html*/`
	<mmx-hero slot="hero_slide">
		<div slot="content">Custom Banner</div>
	</mmx-hero>
`;
secondSlide.outerHTML = newSlideHTML;

03-add-custom-slide-to-second-slide.js

// Add any custom HTML as the second slide
const slider = document.getElementById('mmx-hero-slider__mmx_heroslider');
const firstSlide = slider.querySelector('[slot="hero_slide"]');
const newSlideHTML = /*html*/`<div slot="hero_slide">Custom Banner</div>`;
firstSlide.insertAdjacentHTML('afterend', newSlideHTML);

replace-second-slide-with-custom-html.js

// Replace the second slide with any custom HTML
const slider = document.getElementById('mmx-hero-slider__mmx_heroslider');
const secondSlide = slider.querySelector('[slot="hero_slide"]:nth-child(2)');
const newSlideHTML = /*html*/`
    <div slot="hero_slide">Custom Banner</div>
`;
secondSlide.outerHTML = newSlideHTML;