<div class="full-screen-slider">
    <div id="banner-slider-demo-20" class="owl-carousel owl-banner-carousel" data-slider-id="1">
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/01.jpg"}}) center center / cover no-repeat; position: relative;">
            <div class="content" style="left:20%;top:30%;width:auto;">
                <h2 style="color: #fff;">Running<br>shoes</h2>
                <a href="#">SEE MORE</a>
            </div>
            <ul class="scene" style="width:100%;height:100%:">
                <li class="layer" data-depth="0.05">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/green_shoes.png"}}" alt="" />
                </li>
                <li class="layer" data-depth="0.06">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake1.png"}}" style="position:absolute;top:40%;left:35%" alt="" />
                </li>
                <li class="layer" data-depth="0.07">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake2.png"}}" class="animation-spin" style="position:absolute;top:20%;left:50%" alt="" />
                </li>
                <li class="layer" data-depth="0.10">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake3.png"}}" class="animation-wave" style="position:absolute;top:50%;left:80%" alt="" />
                </li>
                <li class="layer" data-depth="0.15">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake4.png"}}" style="position:absolute;top:70%;left:55%" alt="" />
                </li>
            </ul>
        </div>
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/02.jpg"}}) center center / cover no-repeat; position: relative;">
            <ul class="scene" style="width:100%;height:100%:">
                <li class="layer" data-depth="0.05">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/watch.png"}}" alt="" />
                </li>
            </ul>
            <div class="content" style="left:20%;top:30%;width:auto;">
                <h2 style="color: #fff;">Running smart<br>watch</h2>
                <a href="#">SEE MORE</a>
            </div>
        </div>
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/03.jpg"}}) center center / cover no-repeat; position: relative;">
            <ul class="scene" style="width:100%;height:100%:">
                <li class="layer" data-depth="0.05">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/ball.png"}}" alt="" />
                </li>
            </ul>
            <div class="content" style="left:20%;top:30%;width:auto;">
                <h2 style="color: #fff;">Football<br>accessories</h2>
                <a href="#">SEE MORE</a>
            </div>
        </div>
    </div>
    <div class="owl-thumbs" data-slider-id="1">
        <button class="owl-thumb-item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/01_thumb.jpg"}}"/></button>
        <button class="owl-thumb-item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/02_thumb.jpg"}}"/></button>
        <button class="owl-thumb-item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/03_thumb.jpg"}}"/></button>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel'
        ], function ($) {
            var owl_20 = $("#banner-slider-demo-20").owlCarousel({
                items: 1,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                dots: false,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                thumbs: true,
                thumbImage: false,
                thumbsPrerendered: true,
                thumbContainerClass: 'owl-thumbs',
                thumbItemClass: 'owl-thumb-item',
                loop: true,
                nav: false,
                navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
            });
        });
        require([
            'jquery',
            'js/jquery.parallax.min'
        ], function ($) {
            $(document).ready(function(){
                $('.scene').parallax();
            });
        });
    </script>
</div>