juliya
11/20/2019 - 12:36 PM
swiper-slider
<section id="js-welcome-slider" class="welcome-slider swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide welcome-slide" style="background-image: url('img/bg-home-welcome.jpg')">
<div class="container welcome-container">
<div class="welcome-lawyer-wrapper">
<img src="img/img-lawyer.png" alt="" class="welcome-lawyer-photo">
<div class="welcome-lawyer">
<p class="welcome-lawyer-speciality">Адвокат</p>
<p class="welcome-lawyer-name">Василий Синдеев</p>
<p class="welcome-lawyer-action">Возврат водительских прав</p>
</div>
</div>
<div class="welcome-content">
<h1 class="welcome-title section-title">Вождение в нетрезвом <br>виде</h1>
<p class="welcome-text">Далеко не всегда действия инспектора ДПС являются законными, а освидетельствование на состояние опьянения производится правильно. Мы успешно защищаем водителей по данной статье – ст. 12.8 ч. 1 КоАП РФ</p>
<a href="" class="btn welcome-btn">Проконсультироваться с автоюристом</a>
</div>
</div>
</div>
</div>
<div class="welcome-slider-pagination-container container">
<ul class="swiper-pagination welcome-slider-pagination"></ul>
</div>
</section>
<div class="default-slider-wrapper">
<div class="js-reviews-slider reviews-slider swiper-container">
<div class="swiper-wrapper">
<div class="reviews-slide swiper-slide">
<div class="review-card">
<video>
<source src="video/Hanging%20There.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/Hanging%20There.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- <source src="" type='video/ogg; codecs="theora, vorbis"'>-->
</video>
<button type="button" class="review-card-btn"></button>
</div>
</div>
<div class="reviews-slide swiper-slide">
<div class="review-card">
<video>
<source src="video/Hanging%20There.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/Hanging%20There.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- <source src="" type='video/ogg; codecs="theora, vorbis"'>-->
</video>
<button type="button" class="review-card-btn"></button>
</div>
</div>
</div>
</div>
<div class="swiper-button swiper-button-next reviews-swiper-button-next"></div>
<div class="swiper-button swiper-button-prev reviews-swiper-button-prev"></div>
</div>
<div class="default-slider-wrapper">
<div class="js-business-slider business-slider swiper-container">
<div class="swiper-wrapper">
<div class="business-slide swiper-slide">
<a class="business-card" data-fancybox="gallery" href="img/img-gallery-big.jpg">
<img class="business-img swiper-lazy" src="img/img-gallery-preview.png" data-src="img/img-gallery-small.jpg" alt="">
</a>
</div>
<div class="business-slide swiper-slide">
<a class="business-card" data-fancybox="gallery" href="img/img-gallery-big.jpg">
<img class="business-img swiper-lazy" src="img/img-gallery-preview.png" data-src="img/img-gallery-small.jpg" alt="">
</a>
</div>
<div class="business-slide swiper-slide">
<a class="business-card" data-fancybox="gallery" href="img/img-gallery-big.jpg">
<img class="business-img swiper-lazy" src="img/img-gallery-preview.png" data-src="img/img-gallery-small.jpg" alt="">
</a>
</div>
<div class="business-slide swiper-slide">
<a class="business-card" data-fancybox="gallery" href="img/img-gallery-big.jpg">
<img class="business-img swiper-lazy" src="img/img-gallery-preview.png" data-src="img/img-gallery-small.jpg" alt="">
</a>
</div>
</div>
</div>
<div class="swiper-button swiper-button-next business-swiper-button-next"></div>
<div class="swiper-button swiper-button-prev business-swiper-button-prev"></div>
</div>
<div class="default-slider-wrapper">
<div class="js-articles-slider articles-slider swiper-container">
<div class="swiper-wrapper">
<div class="articles-slide swiper-slide">
<a href="text-page.html" class="article-card">
<div class="article-card-img-wrapper swiper-lazy" data-background="img/img-news-card.jpg"></div>
<div class="article-card-content">
<p class="article-card-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="article-card-date">12.05.2019</p>
<p class="article-card-text">
Идейные соображения высшего порядка, а также сложившаяся структура организации обеспечивает широкому кругу
(специалистов)
участие в формировании дальнейших направлений развития. Повседневная практика показывает, что рамки и место обучения
кадров влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Повседневная практика
показывает
</p>
</div>
</a>
</div>
<div class="articles-slide swiper-slide">
<a href="text-page.html" class="article-card">
<div class="article-card-img-wrapper swiper-lazy" data-background="img/img-news-card.jpg"></div>
<div class="article-card-content">
<p class="article-card-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="article-card-date">12.05.2019</p>
<p class="article-card-text">
Идейные соображения высшего порядка, а также сложившаяся структура организации
</p>
</div>
</a>
</div>
<div class="articles-slide swiper-slide">
<a href="text-page.html" class="article-card">
<div class="article-card-img-wrapper swiper-lazy" data-background="img/img-news-card.jpg"></div>
<div class="article-card-content">
<p class="article-card-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="article-card-date">12.05.2019</p>
<p class="article-card-text">
Идейные соображения высшего порядка, а также сложившаяся структура организации обеспечивает широкому кругу
(специалистов)
участие в формировании дальнейших направлений развития. Повседневная практика показывает, что рамки и место обучения
кадров влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Повседневная практика
показывает Идейные соображения высшего порядка, а также сложившаяся структура организации обеспечивает широкому кругу
</p>
</div>
</a>
</div>
</div>
</div>
<div class="swiper-button swiper-button-next articles-swiper-button-next"></div>
<div class="swiper-button swiper-button-prev articles-swiper-button-prev"></div>
</div>.swiper-wrapper {
-webkit-filter:blur(0);
filter:blur(0);
perspective:1200px;
}
.swiper-slide {
min-height: 100%;
height: auto;
}
.swiper-button {
position: absolute;
display: block;
.box-sizing();
margin-top: 0;
.border-radius(50%);
border: 1px solid transparent;
width: 70px;
height: 70px;
.gradient-45(@accent-color, @accent-color-dark);
cursor: pointer;
pointer-events: all;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -16px;
width: 32px;
height: 22px;
background-image: url("../img/sprite.png");
background-repeat: no-repeat;
}
&:hover, &:active {
outline: none;
border: 1px solid @accent-color-dark;
background: #ffffff;
}
&:focus {
outline: none;
}
&-next {
right: 0;
&::after {
background-position: -60px -41px;
}
&:hover, &:active {
&::after {
background-position: -60px -88px;
}
}
}
&-prev {
left: auto;
right: 95px;
&::after {
background-position: 0 -41px;
}
&:hover, &:active {
&::after {
background-position: 0 -88px;
}
}
}
}
.welcome {
&-slider {
position: relative;
&-pagination-container {
position: absolute;
left: 50%;
top: 0;
z-index: 9;
.box-sizing();
height: 100%;
.translateX(-50%);
pointer-events: none;
}
.swiper-pagination {
counter-reset: li;
.box-sizing();
padding-top: 80px;
width: 47px;
height: 100%;
pointer-events: visible;
&-bullet {
position: relative;
display: block;
.box-sizing();
margin: 0;
.border-radius(0);
padding: 20px 0;
width: 47px;
height: 21px;
background: transparent;
opacity: 1;
cursor: pointer;
.transition();
&:first-child {
margin-top: -5px;
}
&::before {
content: "0" counter(li);
counter-increment: li;
position: absolute;
left: 0;
top: 12px;
font-weight: 300;
font-size: 17px;
line-height: 1;
color: @text-color;
.transition();
}
&::after {
content: '';
position: absolute;
right: 0;
top: 20px;
width: 14px;
height: 1px;
background-color: #6F6F6F;
.transition();
}
&:focus {
outline: none;
}
&-active, &:hover {
background: transparent;
&::after {
width: 47px;
}
&::before {
opacity: 0;
}
}
}
}
}
}
if ($('*').is('#js-welcome-slider')) {
let welcomeSwiper = new Swiper('#js-welcome-slider', {
slidesPerView: 1,
loop: true,
speed: 400,
roundLengths: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination.welcome-slider-pagination',
type: 'bullets',
bulletElement: 'li',
clickable: true
},
effect: 'coverflow',
coverflowEffect: {
slideShadows: false,
}
});
}
if ($('*').is('#js-welcome-slider')) {
let welcomeSwiper = new Swiper('#js-welcome-slider', {
slidesPerView: 1,
loop: true,
speed: 400,
roundLengths: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination.welcome-slider-pagination',
type: 'custom',
renderCustom: function (swiper, current, total) {
return '<span class="swiper-pagination-current">' + ('0' + current).slice(-2) + '</span>' + ' / ' + '<span class="swiper-pagination-total">' + ('0' + total).slice(-2) + '</span>';
}
},
navigation: {
nextEl: '.swiper-button.swiper-button-next.welcome-swiper-button-next',
prevEl: '.swiper-button.swiper-button-prev.welcome-swiper-button-prev'
},
});
if ($('*').is('.js-articles-slider')) {
let articlesSwiper = new Swiper('.js-articles-slider', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
speed: 400,
roundLengths: true,
lazy: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button.swiper-button-next.articles-swiper-button-next',
prevEl: '.swiper-button.swiper-button-prev.articles-swiper-button-prev'
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
$(".swiper-container").hover(function(){
this.swiper.autoplay.stop();
}, function(){
this.swiper.autoplay.start();
});
//несколько одинаковых слайдеров
$('.js-hotel-card-slider').each(function(){
var hotelCardSwiper = new Swiper(this, {
navigation: {
nextEl: this.querySelector('.swiper-button.swiper-button-next'),
prevEl: this.querySelector('.swiper-button.swiper-button-prev'),
},
slidesPerView: 1,
spaceBetween: 0,
loop: true,
roundLengths: true,
speed: 400
});
});
servicesSwiper.on('slideChange', function () {
if (servicesSwiper.activeIndex === 0) {
$('.services-swiper-button-prev').removeClass('active');
} else {
$('.services-swiper-button-prev').addClass('active');
}
if (servicesSwiper.activeIndex === servicesSwiper.slides.length - 2) {
$('.services-swiper-button-next').removeClass('active');
} else {
$('.services-swiper-button-next').addClass('active');
}
});
//slider in bootstrap modal
const sliderOptions = {
init: false,
navigation: {
nextEl: '.swiper-button.swiper-button-next',
prevEl: '.swiper-button.swiper-button-prev',
},
slidesPerView: 1,
spaceBetween: 4,
loop: false,
roundLengths: true,
speed: 400,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
breakpoints: {
480: {
slidesPerView: 2,
spaceBetween: 10,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
992: {
slidesPerView: 3,
spaceBetween: 50,
}
}
};
const servicesSwiper = new Swiper($('.js-services-slider'), sliderOptions);
servicesModal.on('shown.bs.modal', function () {
servicesSwiper.init(sliderOptions);
});