Skip to content

Instantly share code, notes, and snippets.

@mfd

mfd/owl.css

Last active January 15, 2016 13:00
Show Gist options
  • Save mfd/68d7b998c88549fd2882 to your computer and use it in GitHub Desktop.
Save mfd/68d7b998c88549fd2882 to your computer and use it in GitHub Desktop.
Download ZIP
carousel
Raw
owl.css
@import url('http://fonts.googleapis.com/css?family=PT+Mono&subset=all');
@import url('http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic&subset=all');
@import url('http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=all');
.wrap {
width:460px;
margin:0 auto;
}
.owl-carousel .item {
height: 380px;
position: relative;
}
.owl-carousel .item a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 200;
}
.owl-carousel .item .item__caption{
position: absolute;
bottom: 0%;
left: 0;
right: 0;
background: rgba(77, 77, 77, 0.5);
text-align: center;
z-index:1;
}
.owl-carousel .item h4 {
position: relative;
color: #FFF;
margin: .5em 2em 1em 2em;
font: bold italic 220%/1 'PT Serif', serif;
text-align: left;
letter-spacing: -.05em
}
.owl-carousel .item .item__img{
background-position:50% 0;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:0;
}
.owl-carousel .active .item__img{
animation: animateTest2 12s both infinite linear;
}
.owl-carousel .active .item:before{
content:'';
-webkit-transition: width .1s linear;
transition: width .1s linear;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
z-index:100;
/* background: rgba(77, 77, 77, 0.5); */
background:red;
animation: animateTest3 12s both infinite linear;
}
.owl-carousel .item figure {
position: absolute;
right: 5%;
top: 5%;
width: 150px;
opacity: .75;
z-index: 100;
}
.obj__map {
position: relative;
height: 200px;
}
.ya_map {
width: 100%;
height: 100%;
margin: 0;
padding: 0!important;
}
.ya_map_title h4 {
font-size: 120%;
display: block;
padding: .25em .05em;
}
@-webkit-keyframes animateTest {
0% {
display: none;
opacity: 0
}
1% {
display: block;
opacity: .5
}
100% {
display: block;
opacity: 1
}
}
@-webkit-keyframes animateTest2 {
0% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
100% {
-webkit-transform: scale(1.1) rotate(-1deg) translate(10px,10px);
transform: scale(1.1) rotate(-1deg) translate(10px,10px)
}
}
@-webkit-keyframes animateTest3 {
0% {
width: 0
}
100% {
width: 100%
}
}
@keyframes animateTest {
0% {
display: none;
opacity: 0
}
1% {
display: block;
opacity: .5
}
100% {
display: block;
opacity: 1
}
}
@keyframes animateTest2 {
0% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
100% {
-webkit-transform: scale(1.1) rotate(-1deg) translate(5px,5px);
transform: scale(1.1) rotate(-1deg) translate(5px,5px)
}
}
@keyframes animateTest3 {
0% {
width: 0
}
100% {
width: 100%
}
}
Raw
owl.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="owl carousel">
<meta charset="utf-8">
<title>JS Bin</title>
<script src="libs/jquery-2.1.3.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<link rel="stylesheet" href="libs/owl.carousel.css">
<link rel="stylesheet" href="libs/owl.theme.css">
<script src="libs/owl.carousel.js" type="text/javascript"></script>
<link rel="stylesheet" href="libs/animate.min.css">
<link rel="stylesheet" href="owl.css">
<script src="owl.js" type="text/javascript"></script>
</head>
<body>
<div class="wrap">
<div class="owl-carousel owl-oneslide">
<div class="item" id="item-33" data-zhk='{"name":"ЖК «Театральный парк»","coords":[55.960852055988,37.661748300415], "u1k":"/base/?named[]=ТП&flat_rooms[]=1", "u2k":"/base/?named[]=ТП&flat_rooms[]=2","u3k":"3k"}'>
<a href="#"></a>
<div class="item__caption"><h4>Здесь рождаются таланты...<br/>ЖК «Театральный парк»</h4></div>
<figure><img src="imgs/bf577c2dcfd0aba8a39919e06c4201b0.svg" alt="ЖК «Театральный парк»"/></figure>
<div class="item__img" style="background-image: url('imgs/1143_600_1d7a58ff99b324185ccb5ad5dfbdb5e85/bf8b4e88864424e98822fce453cff490.jpg');"></div>
</div>
<div class="item" id="item-33" data-zhk='{"name":"ЖК «Императорские Мытищи»","coords":[55.930635,37.886591], "u1k":"/base/?named[]=ТП&flat_rooms[]=1", "u2k":"/base/?named[]=ТП&flat_rooms[]=2","u3k":"3k"}'>
<a href="#"></a>
<div class="item__caption"><h4>Ощути себя Императором!</h4></div>
<figure><img src="imgs/bf577c2dcfd0aba8a39919e06c4201b0.svg" alt="ЖК «Императорские Мытищи»"/></figure>
<div class="item__img" style="background-image: url('imgs/5ed8c2750d4ad5c79d1ecf4b6b92aed2.jpg');"></div>
</div>
<div class="item" id="item-33" data-zhk='{"name":"ЖК «Государев дом»","coords":[55.536155,37.639921], "u1k":"/base/?named[]=ТП&flat_rooms[]=1", "u2k":"/base/?named[]=ТП&flat_rooms[]=2","u3k":"3k"}'>
<a href="#"></a>
<div class="item__caption"><h4>Сдадим досрочно!<br/>ЖК «Государев дом»</h4></div>
<figure><img src="http://granelle.ru/upload/iblock/052/052e56f7413021513496b5665eaf4762.svg" alt="ЖК «Государев дом»"/></figure>
<div class="item__img" style="background-image: url('imgs/90fba98e5d767ffc361d1b66a839b6b0.jpg');"></div>
</div>
</div>
<div class="obj__map">
<div class="ya_map" id="in_map"></div>
<div class="ya_map_title"><h4></h4></div>
</div>
</div>
</body>
</html>
Raw
owl.js
var myMap, myCollection;
var granelle = {
ymSliderMap: { //Синхронизация трех блоков ЖКна главной
init: function(myMap,myCollection) {
var myCollection = new ymaps.GeoObjectCollection();
var myMap = new ymaps.Map('in_map', {
center: [55.75, 37.6],
zoom: 8,
controls: [],
behaviors: ['drag', 'dblClickZoom',]
});
myMap.controls.add('zoomControl', {sihttp://granelle.atema.pro/bitrix/templates/granelle/imgs/pm_zhk.svgze: 'small', zoomDuration:400, position: {left: '10px', top:'30px'}});
//https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/control.ZoomControl-docpage/
$(".owl-carousel").each(function(){
var autoplay = $(this).data('auto');
var loop = $(this).data('loop');
$(this).owlCarousel({
singleItem: true,
//items:1,
//pagination: false,
autoPlay: 12000,
loop: true ,
stopOnHover:true,
navigation: false,
addClassActive: true,
afterMove: previousslide,
beforeMove: nextslide
});
// First Slide
var slide = $(this).find(".owl-item.active");
slide.find("h4").addClass('animated flipInX');
slide.find("figure").addClass('animated flipInY');
var zhk = slide.find(".item").data('zhk');
var name = zhk.name;
var coords = zhk.coords;
granelle.ymSliderMap.showmap(coords,name,9,myMap,myCollection);
//Работает слайдер
function previousslide() {
var slide = $(this.$elem).find(".owl-item.active");
slide.find("h4").addClass('animated flipInX');
slide.find("figure").addClass('animated flipInY');
var zhk = slide.find(".item").data('zhk');
var name = zhk.name;
var coords = zhk.coords;
granelle.ymSliderMap.showmap(coords,name,9,myMap,myCollection);
}
function nextslide() {
$(this.$elem).find(".animated").removeClass();
myCollection.removeAll();
}
});//$(".owl-carousel").each
},//init
showmap: function(coords,name,zz,myMap,myCollection) {
var zz = zz ? zz : 16;
var pm = new ymaps.Placemark(
coords,
{
//hintContent: zhk, balloonContentHeader: zhk
},
{
iconLayout: 'default#image',
iconImageHref: 'http://granelle.atema.pro/bitrix/templates/granelle/imgs/pm_zhk.svg',
iconImageSize: [70, 70],
iconImageOffset: [-35, -50]
},
{
//overlayFactory: "default#interactiveGraphics"
}
);
myMap.panTo(coords).then(function () {
myCollection.add(pm);
myMap.geoObjects.add(myCollection);
//myMap.balloon.open(coords, zhk, {closeButton: false});
myMap.setZoom(zz, {
checkZoomRange: false
});
$('.ya_map_title h4').text(name);
desc.wrap("<div class='desc'></div>");
console.log(desc)
});
},
}
};
//$(function() {
jQuery(document).ready(function ($) {
ymaps.ready(function() {
granelle.ymSliderMap.init(myMap,myCollection);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment