CSS Animate

https://stackoverflow.com/q/46245524/5076162

by dixalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<div class="c first">
    <ul align="center" style="padding-top: 20px;" class="select-link">
        <li class="link-promotions" style="display: inline; font-size: 18px; margin-right: 80px;"><a href="#">PROMOTIONS</a></li>
        <li class="link-casino-games" style="display: inline; font-size: 18px; margin-right: 80px;"><a href="#">CASINO GAMES</a></li>
        <li class="link-live-odds" style="display: inline; font-size: 18px; margin-right: 80px;"><a href="#">LIVE ODDS</a></li>
    </ul>
</div>

<div class="owl-carousel sec-promotions c">
    <div class="link" id="show-hide-1"><img id="pic-animate" src="http://lorempixel.com/200/300/"></div>
    <div class="link" id="show-hide-2"><img id="pic-animate" src="http://lorempixel.com/200/301/"></div>
    <div class="link" id="show-hide-3"><img id="pic-animate" src="http://lorempixel.com/200/302/"></div>
    <div class="link" id="show-hide-4"><img id="pic-animate" src="http://lorempixel.com/200/303/"></div>
</div>

<div class="owl-carousel sec-casino-games c">
    <div class="link" id="show-hide-1"><img id="pic-animate" src="http://lorempixel.com/200/304"></div>
    <div class="link" id="show-hide-2"><img id="pic-animate" src="http://lorempixel.com/200/305"></div>
    <div class="link" id="show-hide-3"><img id="pic-animate" src="http://lorempixel.com/200/306"></div>
    <div class="link" id="show-hide-4"><img id="pic-animate" src="http://lorempixel.com/200/307"></div>
    <div class="link" id="show-hide-5"><img id="pic-animate" src="http://lorempixel.com/200/308"></div>
    <div class="link" id="show-hide-6"><img id="pic-animate" src="http://lorempixel.com/200/309"></div>
    <div...

CSS

.active-link {
    font-weight: bold;
    border-bottom: solid #f1962f 4px;
}

html img {
    display: -webkit-inline-box;
}

.owl-theme .owl-nav [class*=owl-] {
    margin: 0;
}

.owl-prev {
    width: 35px;
    height: 100px;
    position: absolute;
    top: 40%;
    left: -45px;
    display: block!IMPORTANT;
    border: 0px solid black;
}

.owl-prev span {
    font-size: 200%
}

.owl-next span {
    font-size: 200%
}

.owl-next {
    width: 35px;
    height: 100px;
    position: absolute;
    top: 40%;
    right: -45px;
    display: block!IMPORTANT;
    border: 0px solid black;
}

.owl-prev i,
.owl-next i {
    transform: scale(1, 6);
    color: #ccc;
}

.display-it {
    display: block;
}

.owl-item link img {
    width: auto;
}

.c {
    /*visibility: hidden;
	left: -9999px !important;
    z-index: -500;
    top: -9999px;
	
	*/
    display: none;
    opacity: 0;
    position: absolute !important;
}

.owl-carousel {
    margin: auto;
    width: 60%;
}

JavaScript

jQuery(document).ready(function($) {
    $('.owl-carousel').each(function(index, element) {
        jQuery(element).owlCarousel({
            items: 4,
            lazyLoad: true,
            margin: 20,
            nav: true,
            dots: false,
            responsive: {
                0: {
                    items: 4
                }
            }
        });
    });

    var owl_content = jQuery('.owl-carousel');
    var owl_links = jQuery('.select-link a');

    jQuery(owl_links).each(function(index, element) {
        jQuery(element).click(function(e) {
            jQuery(owl_content).each(function(i, el) {
                jQuery(el).addClass('c', 500);
                if (i === index) {
                    jQuery(owl_content[index]).removeClass('c', 500);
                    console.log(i);
                }
            });
        });
    });

    /*Change css of links on click*/
    $('.select-link li').click(function() {
        $('.select-link li').removeClass('active-link');
        $(this).addClass('active-link');
    });

    jQuery('.c.first').removeClass('c');
});