seotapki,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<link rel="stylesheet" type="text/css" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>
<style type="text/css">
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
position:relative;
}
.owl-carousel .owl-prev{
position:absolute;
top:0; left:0;
display:block;
height:99%;
width:90px;
background:red;
}
.owl-carousel .owl-next{
position:absolute;
top:0; right:0;
display:block;
height:99%;
width:90px;
background:red;
}
.owl-prev,.owl-next{
opacity:0;
}
.prev:after, .next:after{
content: attr(class);
}
.prev,.next{
display: inline-block;
}
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.string1,.string2{
display: none;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
var owl = $('.owl-carousel').owlCarousel({
loop: true,
nav: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
items:1,
mouseDrag:false
});
owl.on('change.owl.carousel', function(e) {
$(".top_text").typed({
strings: [$('.string1').eq(e.page.index).text()],
typeSpeed: 0,
showCursor: false,
});
$(".bottom_text").typed({
strings: [$('.string2').eq(e.page.index).text()],
typeSpeed: 0,
showCursor: false,
});
});
})
</script>
</head>
<body> <div class="top_text">111 up</div>
<div class="owl-carousel">
<div class="item"> <div class="string1">111 up</div><div class="string2">111 dn</div>
<h4>1</h4>
</div>
<div class="item"> <div class="string1">222 up</div><div class="string2">222 dn</div>
<h4>2</h4>
</div>
<div class="item"> <div class="string1">333 up</div><div class="string2">333 dn</div>
<h4>3</h4>
</div>
</div>
<div class="bottom_text">111 dn</div>
</body>
</html>