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


<?php

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

{% set title='Callback: Destroy' %}
{% set subtitle='Add a custom callback function when destroying the slider.' %}

{% block extra %}
<style>
    #destroy {
        position: absolute;
        cursor: pointer;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 40px;
        outline: none;
        box-shadow: none;
        background: none;
        display: block;
        padding: 0.5em;
        border-radius: 10px;
        text-shadow: none;
        border: 1px solid black;
        z-index: 10;
    }
    #destroy p {
        font-size: 3em;
        color: rgba(40, 44, 42, 0.3);
        padding: .5em .5em .25em;
        font-weight: 900;
        line-height: 1;
    }
    #destroy span {
        font-family: Helvetica;
        text-transform: uppercase;
        font-weight: 700;
        padding-bottom: 0.75em;
        display: block;
    }
</style>

<button id="destroy">
    <p>Destroy Slider</p>
    <span>A new one will take its place</span>
</button>
{% endblock %}

{% block slider %}
    <article class="example">
        {% include 'partials/-slides.html' %}
        {% include 'partials/-arrows.html' %}
    </article>
{% endblock %}

{% block init %}
<script>
    // possible effects
    var effects = ['spiral-left', 'spiral-right', 'carousel', 'cube', 'classic', 'concave', 'wave', 'arc', 'coverflow'];
    var el = document.querySelector('.example');

    var slider = new Bee3D(el, {
        // get random effect
        effect: effects[ Math.floor(Math.random() * effects.length) ],
        listeners: {
            keys: true
        },
        navigation: {
            enabled: true
        },
        onDestroy: function(){
            alert('Custom onDestroy callback function!');
            el.parentNode.innerHTML = '<p>Slider Deleted =O</p>'
        }
    });


    document.getElementById('destroy').addEventListener('click', function(e){
        e.preventDefault();
        // call the destroy method on slider object
        return slider.destroy();
    });
</script>
{% endblock %}

?>