Link Owl Carousel

index.html

<div class="stone-slider owl-carousel">
	<div class="item">
		<div class="image"><img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt=""></div>
		<a href="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">Click Image</a>
	</div>
</div>

link-owl-carousel.markdown

Link Owl Carousel

A Pen by Angela on CodePen.

License.

script.js

$('.stone-slider').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
		autoplay: true,
    rewind: true,
		autoplayHoverPause: true,
		autoplayTimeout: 7500,
		autoplaySpeed: 3000,
		items: 1
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

style.css

a {
	display: inline-block;
	border: 1px solid;
	padding: 10px 20px;
	position: absolute;
	bottom: 20px;
	left: 20px;
}

a:hover {
	text-decoration: none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />