Pk Magento 2: banner slider

banner slider

<div style="width: 746px; border: 1px solid #459b06; height: 250px;">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">// <![CDATA[
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}
 
function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}
 
function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2500);
}
// ]]></script>
<script type="text/javascript">// <![CDATA[
$(window).load(function() {
startRotator("#rotator");
})
// ]]></script>
<div id="rotator">
<img style="position: absolute;" src="{{media url="wysiwyg/banner1.gif"}}" alt="" /> <img style="position: absolute;" src="{{media url="wysiwyg/banner2.gif"}}" alt="" /> <img style="position: absolute;" src="{{media url="wysiwyg/banner3.gif"}}" alt="" /> <img style="position: absolute;" src="{{media url="wysiwyg/banner4.gif"}}" alt="" /></div>
</div>