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


<?php

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

{% set title='Multiple: Basic' %}
{% set subtitle='Two basic sliders that happen to be on the same page...' %}

{% block extra %}
    <style>
        .demo-wrapper {
            position: relative;
            display: block;
            height: 500px;
            width: 100%;
            margin: 0 auto;
        }
    </style>
{% endblock %}

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

{% set parallax = true %}

{% block init %}
<script>
    var example1 = document.querySelector('.example1'),
        example2 = document.querySelector('.example2');

    var slider1 = new Bee3D(example1, {
        effect: 'coverflow',
        listeners: {
            keys: true
        },
        navigation: { enabled: true },
        shadows: { enabled: true },
        parallax: { enabled: true },
        autoplay: {
            enabled: true,
            speed: 2500
        },
    });

    var slider2 = new Bee3D(example2, {
        effect: 'classic',
        listeners: { drag: true },
        shadows: { enabled: true },
    });
</script>
{% endblock %}

?>