Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Owl Carousel</title>
- <!-- Font -->
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
- <!-- Owl Carousel CSS -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
- <!-- Owl Carousel Default Theme -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
- <!-- Fontawesome -->
- <script src="https://kit.fontawesome.com/67b6e93a48.js"></script>
- <style>
- * {
- font-family: 'Roboto', sans-serif;
- }
- img {
- box-shadow: 0 0 2px #000;
- transition: ease-out all 0.5s;
- }
- .img-hover {
- transform: scale(1.03);
- }
- .owl-prev,
- .owl-next {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- display: block !important;
- border: none;
- }
- .owl-next:focus,
- .owl-prev:focus {
- outline: none;
- }
- .owl-prev {
- left: 20px;
- }
- .owl-next {
- right: 20px;
- }
- .owl-prev i,
- .owl-next i {
- width: 300%;
- height: 100%;
- transform: scale(2, 5);
- border-radius: 50%;
- color: aliceblue;
- background: rgba(0, 0, 0, 0.5);
- }
- .x-carousel-item {
- cursor: pointer;
- position: relative;
- padding: 10px 0;
- transition: linear all 0.5s;
- }
- .x-carousel-item-content {
- color: white;
- padding: 5px 10px;
- text-align: justify;
- text-justify: inter-word;
- background: #00000080;
- cursor: pointer;
- transform: translateY(65%);
- transition: linear all 0.5s;
- }
- .x-carousel-item-content-wrapper {
- overflow: hidden;
- position: absolute;
- min-width: 100px;
- min-height: 100px;
- bottom: 10px;
- left: 0;
- }
- .x-carousel-item-content-translate {
- transform: translateY(0%);
- }
- .x-carousel-item-content-wrapper-scale {
- transform: scale(1.03);
- }
- </style>
- </head>
- <body>
- <div class="owl-carousel owl-theme">
- <div class="item ">
- <div class="x-carousel-item">
- <img src="./img/p1.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 1</h4>
- <p>Here will be the contents of pradesh 1. Whatever anything and everything write here. Here will be the contents of pradesh 1. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="x-carousel-item">
- <img src="./img/p2.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 2</h4>
- <p>Here will be the contents of pradesh 2. Whatever anything and everything write here. Here will be the contents of pradesh 2. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item ">
- <div class="x-carousel-item">
- <img src="./img/p3.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 3</h4>
- <p>Here will be the contents of pradesh 3. Whatever anything and everything write here. Here will be the contents of pradesh 3. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item ">
- <div class="x-carousel-item">
- <img src="./img/p4.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 4</h4>
- <p>Here will be the contents of pradesh 4. Whatever anything and everything write here. Here will be the contents of pradesh 4. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item ">
- <div class="x-carousel-item">
- <img src="./img/p5.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 5</h4>
- <p>Here will be the contents of pradesh 5. Whatever anything and everything write here. Here will be the contents of pradesh 5. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item ">
- <div class="x-carousel-item">
- <img src="./img/p6.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 6</h4>
- <p>Here will be the contents of pradesh 6. Whatever anything and everything write here. Here will be the contents of pradesh 6. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- <div class="item ">
- <div class="x-carousel-item">
- <img src="./img/p7.jpg">
- <div class="x-carousel-item-content-wrapper">
- <div class="x-carousel-item-content">
- <h4>Pradesh 7</h4>
- <p>Here will be the contents of pradesh 7. Whatever anything and everything write here. Here will be the contents of pradesh 7. Whatever anything and everything write here.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- jQuery -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
- <!-- Owl Carousel JS -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
- <script>
- $('.owl-carousel').owlCarousel({
- loop: true,
- margin: 10,
- nav: true,
- dots: false,
- autoplay: true,
- stagePadding: 50,
- autoplayTimeout: 4000,
- responsiveClass: true,
- responsive: {
- 0: {
- items: 1
- },
- 600: {
- items: 2
- },
- 1000: {
- items: 3
- },
- 1300: {
- items: 4
- }
- },
- navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
- })
- var items = document.getElementsByClassName('x-carousel-item');
- jQuery.each(items, function(i, item) {
- $(item).hover(
- function() {
- console.log('enter' + i);
- $(item).find(".x-carousel-item-content").addClass('x-carousel-item-content-translate');
- $(item).find(".x-carousel-item-content-wrapper").addClass('x-carousel-item-content-wrapper-scale');
- $(item).find('img').addClass('img-hover');
- },
- function() {
- console.log('exit' + i);
- $(item).find(".x-carousel-item-content").removeClass('x-carousel-item-content-translate');
- $(item).find(".x-carousel-item-content-wrapper").removeClass('x-carousel-item-content-wrapper-scale');
- $(item).find('img').removeClass('img-hover');
- }
- );
- $(item).click(function(event) {
- alert('You clicked' + $(item).find('h4').html());
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement