Файл: dist/multiple-synchronized.html
Строк: 303
<?php
<!doctype html><html lang=en><base href=/ ><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Bee3D Slider</title><meta name=HandheldFriendly content=True><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv=cleartype content=on><link href="http://fonts.googleapis.com/css?family=Ubuntu:500" rel=stylesheet><link href="http://fonts.googleapis.com/css?family=Oxygen:700,400" rel=stylesheet><link rel=stylesheet href=css/bee3D.css><link rel=stylesheet href=css/demo.css><div class=intro-text><h1>Multiple: Synchronized</h1><h3>Connect two (or more) sliders, so that their <u>active index</u> is always the same.</h3></div><style>.demo-wrapper {
position: relative;
display: block;
overflow: hidden;
bottom: auto;
height: 450px;
bottom: auto;
left: auto;
right: auto;
width: 48%;
float: left;
margin: 1%;
}
.example1 {
height: 600px;
width: 100%;
margin: 0 auto;
float: none;
}</style><article class="demo-wrapper example1"><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section><span class="bee3D--nav bee3D--nav__prev"></span> <span class="bee3D--nav bee3D--nav__next"></span></article><article class="demo-wrapper example2"><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section></article><article class="demo-wrapper example3"><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section></article><article class="demo-wrapper example4"><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section><span class="bee3D--nav bee3D--nav__prev"></span> <span class="bee3D--nav bee3D--nav__next"></span></article><article class="demo-wrapper example5"><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section></article><a id=lukeed href=http://www.lukeed.com rel=follow target=_blank>LUKE'ED DESIGN<span></span></a><script src=js/vendor/parallax.custom.js></script><script src=js/vendor/classie.js></script><script src=js/bee3D.js></script><script>var example1 = document.querySelector('.example1'),
example2 = document.querySelector('.example2'),
example3 = document.querySelector('.example3'),
example4 = document.querySelector('.example4'),
example5 = document.querySelector('.example5');
var slider1 = new Bee3D(example1, {
effect: 'carousel',
listeners: {
touches: true
},
shadows: { enabled: true },
parallax: { enabled: true },
navigation: { enabled: true },
sync: {
enabled: true,
targets: ['slider2', 'slider3', 'slider4', 'slider5']
}
});
var slider2 = new Bee3D(example2, {
effect: 'classic',
listeners: { drag: true },
shadows: { enabled: true },
sync: {
enabled: true,
targets: ['slider1', 'slider3', 'slider4', 'slider5']
}
});
var slider3 = new Bee3D(example3, {
effect: 'coverflow',
listeners: { keys: true },
parallax: { enabled: true },
loop: { enabled: true },
sync: {
enabled: true,
targets: ['slider1', 'slider2', 'slider4', 'slider5']
}
});
var slider4 = new Bee3D(example4, {
effect: 'spiral-left',
navigation: { enabled: true },
shadows: { enabled: true },
sync: {
enabled: true,
targets: ['slider1', 'slider2', 'slider3', 'slider5']
}
});
var slider5 = new Bee3D(example5, {
effect: 'concave',
loop: { enabled: true },
autoplay: { enabled: true },
shadows: { enabled: true },
sync: {
enabled: true,
targets: ['slider1', 'slider2', 'slider3', 'slider4']
}
});</script>
?>