<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="libs/mixitup/mixitup.min.js"></script>
<script src="js/main.js"></script>//слайдер для проекта
$('.slider__top').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider__bottom'
});
$('.slider__bottom').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider__top',
arrows: false,
dots: false,
centerMode: true,
focusOnSelect: true,
infinite: true,
centerPadding: 0
});
//при нажатии на крестик будет скрываться слайдер
$('.slider-close').click(function() {
$('.projeckt-slider-1,.projeckt-slider-2,.projeckt-slider-3,.projeckt-slider-4').fadeOut(400, function() {
$('.slider__bottom').slick('slickGoTo', 0, true);
});
});
//при нажатии на кнопку"смотреть" будет открываться слайдер
$('.portfolio__block-img6 > button').click(function() {
$('.projeckt-slider-1').fadeIn(400, function() {
$('.slider__top').slick('setPosition');
$('.slider__bottom').slick('setPosition');
});
});
$('.portfolio__block-img7 > button').click(function() {
$('.projeckt-slider-2').fadeIn(400, function() {
$('.slider__top').slick('setPosition');
$('.slider__bottom').slick('setPosition');
});
});
$('.portfolio__block-img8 > button').click(function() {
$('.projeckt-slider-3').fadeIn(400, function() {
$('.slider__top').slick('setPosition');
$('.slider__bottom').slick('setPosition');
});
});
$('.portfolio__block-img9 > button').click(function() {
$('.projeckt-slider-4').fadeIn(400, function() {
$('.slider__top').slick('setPosition');
$('.slider__bottom').slick('setPosition');
});
});//при нажатии на крестик будет скрываться слайдер
$('.slider-close').click(function() {
$('.projeckt-slider-1,.projeckt-slider-2,.projeckt-slider-3,.projeckt-slider-4').fadeOut();
});
//при нажатии на кнопку"смотреть" будет открываться слайдер
$('.portfolio__block-img6 > button').click(function() {
$('.projeckt-slider-1').fadeToggle();
});
$('.portfolio__block-img7 > button').click(function() {
$('.projeckt-slider-2').fadeToggle();
});
$('.portfolio__block-img8 > button').click(function() {
$('.projeckt-slider-3').fadeToggle();
});
$('.portfolio__block-img9 > button').click(function() {
$('.projeckt-slider-4').fadeToggle();
});<div id="portfolio" class="portfolio">
<div class="container">
<h2 class="section-title">/портфолио/</h2>
<div class="portfolio__wrapper">
<div class="portfolio__block portfolio__block-img6">
<span class="portfolio__title">
Реклама приложения
</span>
<button class="btn-portfolio">Смотреть</button>
</div>
<!-- /.portfolio__block -->
<div class="portfolio__block portfolio__block-img7">
<span class="portfolio__title">
Сайт - блог
</span>
<button class="btn-portfolio">Смотреть</button>
</div>
<!-- /.portfolio__block -->
<div class="portfolio__block portfolio__block-img8">
<span class="portfolio__title">
Сайт для фирмы спортивной одежды
</span>
<button class="btn-portfolio">Смотреть</button>
</div>
<!-- /.portfolio__block -->
<div class="portfolio__block portfolio__block-img9">
<span class="portfolio__title">
Сайт автосервиса
</span>
<button class="btn-portfolio">Смотреть</button>
</div>
<!-- /.portfolio__block -->
</div>
<!-- /.portfolio__portfolio -->
</div>
<!-- /.container -->
</div>
<!-- /.portfolio --><div class="projeckt-slider projeckt-slider-1">
<div class="container">
<div class="slider-wrapper">
<h2 class="slider-title">Рекламный сайт приложения для смартфона</h2>
<div class="slider-close"></div>
<!-- /.slider-close -->
<div class="slider__top">
<img src="img/portfolio/projeckt-6/img-1.jpg" alt="Реклама приложения" class="slider__top-img">
<img src="img/portfolio/projeckt-6/img-2.jpg" alt="Реклама приложения" class="slider__top-img">
<img src="img/portfolio/projeckt-6/img-3.jpg" alt="Реклама приложения" class="slider__top-img">
<img src="img/portfolio/projeckt-6/img-4.jpg" alt="Реклама приложения" class="slider__top-img">
</div>
<!-- /.slider__top -->
<div class="slider__bottom">
<img src="img/portfolio/projeckt-6/img-1.jpg" alt="Реклама приложения" class="slider__bottom-img">
<img src="img/portfolio/projeckt-6/img-2.jpg" alt="Реклама приложения" class="slider__bottom-img">
<img src="img/portfolio/projeckt-6/img-3.jpg" alt="Реклама приложения" class="slider__bottom-img">
<img src="img/portfolio/projeckt-6/img-4.jpg" alt="Реклама приложения" class="slider__bottom-img">
</div>
<!-- /.slider__bottom -->
</div>
<!-- /.slider-wrapper -->
</div>
<!-- /.container -->
</div>
<!-- /.projeckt-slider -->
<div class="projeckt-slider projeckt-slider-2">
<div class="container">
<div class="slider-wrapper">
<h2 class="slider-title">Рекламный сайт приложения для смартфона</h2>
<div class="slider-close"></div>
<!-- /.slider-close -->
<div class="slider__top">
<img src="img/portfolio/projeckt-7/img-1.jpg" alt="Реклама приложения" class="slider__top-img">
<img src="img/portfolio/projeckt-7/img-2.jpg" alt="Реклама приложения" class="slider__top-img">
<img src="img/portfolio/projeckt-7/img-3.jpg" alt="Реклама приложения" class="slider__top-img">
<img src="img/portfolio/projeckt-7/img-4.jpg" alt="Реклама приложения" class="slider__top-img">
</div>
<!-- /.slider__top -->
<div class="slider__bottom">
<img src="img/portfolio/projeckt-7/img-1.jpg" alt="Реклама приложения" class="slider__bottom-img">
<img src="img/portfolio/projeckt-7/img-2.jpg" alt="Реклама приложения" class="slider__bottom-img">
<img src="img/portfolio/projeckt-7/img-3.jpg" alt="Реклама приложения" class="slider__bottom-img">
<img src="img/portfolio/projeckt-7/img-4.jpg" alt="Реклама приложения" class="slider__bottom-img">
</div>
<!-- /.slider__bottom -->
</div>
<!-- /.slider-wrapper -->
</div>
<!-- /.container -->
</div>
<!-- /.projeckt-slider -->
</div>
<!-- /.slider-wrapper -->
</div>
<!-- /.container -->
</div>
<!-- /.projeckt-slider -->