Slider
<html style="overflow: hidden">
<head>
<script>
var PDFZ_src =
"https://dev-apicreator.argoflow.io/aura/media/60802970502e0904eddacf4b/content";
</script>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<style>
.mySlides {
display: none;
}
.w3-left,
.w3-right,
.w3-badge {
cursor: pointer;
}
.w3-badge {
height: 13px;
width: 13px;
padding: 0;
}
.w3-text-khaki {
color: #000000;
}
</style>
</head>
<body style="background: white; margin: 2px">
<div class="w3-content w3-display-container" style="max-width: 800px">
<a
href="http://www.esuppliersindia.com/sri-upvc-windows-systems/tough-single-glazed-windows-pr4504250-sFP-swf.html"
style="width: 100%; height: 100%"
target="_blank"
>
<img
class="mySlides"
src="https://api.bear2b.com/media/19714260395db89cf998b840.58788011.jpg"
style="width: 100%; display: none"
/>
</a>
<a
href="https://www.indiamart.com/proddetail/upvc-double-glazed-windows-19910748655.html"
style="width: 100%; height: 100%"
target="_blank"
>
<img
class="mySlides"
src="https://api.bear2b.com/media/4102406385db89d1b0fbe40.36279404.jpg"
style="width: 100%; display: block"
/>
</a>
<a
href="https://www.notarowindows.com/whats-the-difference-between-double-and-triple-glazing/"
style="width: 100%; height: 100%"
target="_blank"
>
<img
class="mySlides"
src="https://api.bear2b.com/media/13909314965db89d41614969.84650074.jpg"
style="width: 100%; display: none"
/>
</a>
<div
class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle"
style="width: 100%"
>
<div
class="w3-left w3-hover-text-khaki"
style="color: #000000"
onclick="plusDivs(-1)"
>
❮
</div>
<div
class="w3-right w3-hover-text-khaki"
style="color: #000000"
onclick="plusDivs(1)"
>
❯
</div>
<span
class="w3-badge demo w3-border w3-transparent w3-hover-white"
onclick="currentDiv(1)"
></span>
<span
class="w3-badge demo w3-border w3-transparent w3-hover-white w3-white"
onclick="currentDiv(2)"
></span>
<span
class="w3-badge demo w3-border w3-transparent w3-hover-white"
onclick="currentDiv(3)"
></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs((slideIndex += n));
}
function currentDiv(n) {
showDivs((slideIndex = n));
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-white";
window.parent.postMessage({ slideIndex: slideIndex }, "*");
}
// Inter-webviews message bus
function onMessage(event) {
console.log("iframe onMessage", event);
event.source.postMessage("ACK", "*");
}
window.addEventListener("message", onMessage);
</script>
</body>
</html>