chernyhmihail
7/12/2017 - 3:22 PM
grid-to-slidshow.html
grid-to-slidshow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Галерея со слайдером</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/components/slideshow.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/components/slidenav.min.css" />
</head>
<body>
<section class="uk-block">
<div class="uk-container uk-container-center">
<div class="uk-panel">
<h3 class="uk-panel-title uk-text-center">Галерея со слайдером</h3>
</div>
<div class="uk-slidenav-position" data-uk-slideshow="{animation: 'scroll'}">
<div id="event">
<div class="event-grid">
<ul class="event-grid__list uk-grid uk-grid-width-large-1-4 uk-grid-width-medium-1-4 uk-grid-width-small-1-2">
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="0"><span class="item-title">1</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="1"><span class="item-title">2</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="2"><span class="item-title">3</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="3"><span class="item-title">4</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="4"><span class="item-title">5</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="5"><span class="item-title">6</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="6"><span class="item-title">7</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="7"><span class="item-title">8</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="8"><span class="item-title">9</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="9"><span class="item-title">10</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="10"><span class="item-title">11</span></a>
</li>
<li class="event-grid__item">
<a href="#event" data-uk-slideshow-item="11"><span class="item-title">12</span></a>
</li>
</ul>
</div>
<div class="event-slider uk-hidden">
<a href="#!" class="uk-close"></a>
<ul class="uk-slideshow">
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">1</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, ipsam beatae at explicabo quidem eveniet saepe rerum alias corporis nam officiis recusandae sapiente illum quisquam.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">2</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, magni officiis aliquid est! Tempore praesentium est pariatur, nesciunt aliquid dicta, sit? Maiores fuga, id unde.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">3</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae eius officiis ex veniam fugiat voluptatum cumque repellendus eaque? Repudiandae quo rem incidunt rerum, id. Officiis.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">4</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga hic, ipsa illum culpa distinctio sed laborum vel, pariatur, praesentium quae quam perferendis beatae, eligendi exercitationem.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">5</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cum, modi suscipit optio cumque. Voluptatum doloremque alias quis incidunt iure reprehenderit, reiciendis, beatae cupiditate atque.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">6</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde pariatur porro debitis nihil dolorum corrupti voluptatibus aperiam sit cumque, neque reiciendis, consectetur deleniti iste nemo.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">7</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde ea nemo ipsam assumenda pariatur voluptatem et. At cumque velit natus eos. Numquam quaerat est sit.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">8</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores asperiores ipsa illum consequuntur exercitationem non, cumque eligendi. Est placeat corporis, sed vitae quis obcaecati facilis.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">9</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis obcaecati sed distinctio aspernatur beatae et inventore soluta, vitae voluptates ad, doloremque temporibus iure minima!</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">10</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem dolorum necessitatibus nam molestiae quis dolore sint cum vitae esse! Nam omnis, earum voluptatum animi.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">11</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem fugit vitae sunt, voluptatibus sapiente id, aspernatur totam ipsam reprehenderit natus laborum. Omnis ullam itaque suscipit.</p>
</div>
</li>
<li class="event-slider__item">
<div class="event-slider__header">
<span class="event-slider__title">12</span>
</div>
<div class="event-slider__content">
<img src="http://via.placeholder.com/350x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum tempora, aut fuga, illum quos obcaecati excepturi reiciendis ut tenetur unde illo veritatis placeat? Odio, debitis.</p>
</div>
</li>
</ul>
<div class="event-slider__nav">
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
#event,#event .event-grid__list{display:block}#event .event-grid__item a .item-title,#event .event-slider__title{font-size:18px;font-weight:700;text-transform:uppercase;color:#fff}#event{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}#event .event-grid__item{display:block;margin-bottom:20px!important}#event .event-grid__item:nth-child(1) a{background-color:#a274ce}#event .event-grid__item:nth-child(2) a{background-color:#e7b622}#event .event-grid__item:nth-child(3) a{background-color:#0eabde}#event .event-grid__item:nth-child(4) a{background-color:#e7b622}#event .event-grid__item:nth-child(5) a,#event .event-grid__item:nth-child(6) a,#event .event-grid__item:nth-child(7) a{background-color:#0eabde}#event .event-grid__item:nth-child(8) a{background-color:#9b63cf}#event .event-grid__item:nth-child(9) a{background-color:#0eabde}#event .event-grid__item:nth-child(10) a{background-color:#9b63cf}#event .event-grid__item:nth-child(11) a,#event .event-grid__item:nth-child(12) a{background-color:#e7b622}#event .event-grid__item a{height:130px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#a274ce}#event .event-grid__item a:active,#event .event-grid__item a:focus,#event .event-grid__item a:hover{text-decoration:none;color:#fff}#event .event-grid__item a .item-title{line-height:19px}#event .event-slider{position:absolute;width:100%;height:100%;min-height:100%;top:0;right:0;bottom:0;left:0}#event .event-slider .uk-close{position:absolute;right:20px;top:20px;color:#fff;z-index:10}#event .event-slider .uk-slideshow{min-height:100%}#event .event-slider__item{color:#fff;padding:30px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100%}#event .event-slider__item:nth-child(1){background-color:#a274ce}#event .event-slider__item:nth-child(2){background-color:#e7b622}#event .event-slider__item:nth-child(3){background-color:#0eabde}#event .event-slider__item:nth-child(4){background-color:#e7b622}#event .event-slider__item:nth-child(5),#event .event-slider__item:nth-child(6),#event .event-slider__item:nth-child(7){background-color:#0eabde}#event .event-slider__item:nth-child(8){background-color:#9b63cf}#event .event-slider__item:nth-child(9){background-color:#0eabde}#event .event-slider__item:nth-child(10){background-color:#9b63cf}#event .event-slider__item:nth-child(11),#event .event-slider__item:nth-child(12){background-color:#e7b622}#event .event-slider__header{margin:0 0 30px;display:inline-block;width:200px;text-align:center}#event .event-slider__title{line-height:30px}#event .event-slider__content{color:#fff}#event .event-slider__content::after{clear:both;content:"";display:table}#event .event-slider__content img{float:right;margin-left:30px;margin-bottom:30px}@media only screen and (max-width:769px){#event .event-slider__content img{float:none;margin:0;width:100%}}#event .event-slider__content p{color:#fff;margin-bottom:10px;font-size:15px}#event .event-slider__nav{position:absolute;top:15px;left:30px;width:200px}@media only screen and (max-width:479px){#event .event-slider__item{padding:15px}#event .event-slider__nav{top:15px;left:15px}}#event .event-slider__nav .uk-slidenav{display:block;margin-top:0}#event .event-slider__nav .uk-slidenav-previous{left:0}#event .event-slider__nav .uk-slidenav-next{right:0}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/components/slideshow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/components/slideshow-fx.min.js"></script>
<script>
$('#event .event-grid__item a').click(function(event) {
$('#event .event-slider').removeClass('uk-hidden');
var scroll_el = $(this).attr('href');
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollTop: $(scroll_el).offset().top - 15 }, 500);
}
return false;
});
$('#event .uk-close').click(function (e) {
e.preventDefault();
$('#event .event-slider').addClass('uk-hidden');
});
</script>
</body>
</html>