Просмотр архива Bee3D Slider - Touch-Enabled Pure JS Plugin


<?php

{% extends 'partials/example.html' %}

{% set title='Shadows: Custom Template' %}

{% block extra %}
    <style>
        .custom--shadow-wrapper {
            position: absolute;
            z-index: -1;
            left: 0;
            width: 100%;
            height: 100px;
        }
        .custom--shadow span {
            display: block;
            content: '';
            left: 0;
            width: 100%;
            height: 200px;
            border-radius: 50%;
            background: #f36f56;
            box-shadow: 0 0 10px 50px #f36f56;
            -webkit-transition: opacity 1.5s;
            transition: opacity 1.5s;
            opacity: 0.4;
            -webkit-transform: rotateX(95deg) translateZ(30px) scale(.55);
            transform: rotateX(95deg) translateZ(30px) scale(.55);
        }
    </style>
{% endblock %}
{% block slider %}
    <article class="example">
        {% include 'partials/-slides.html' %}
        {% include 'partials/-arrows.html' %}
    </article>
{% endblock %}

{% block init %}
<script>
    var element = document.querySelector('.example');

    var slider = new Bee3D(element, {
        effect: 'wave',
        listeners: {
            keys: true
        },
        navigation: {
            enabled: true
        },
        shadows: {
            enabled: true,
            template: [
                '<div class="custom--shadow-wrapper">',
                    '<div class="custom--shadow">',
                        '<span></span>',
                    '</div>',
                '</div>'
        ].join('')
        }
    });
</script>
{% endblock %}

?>