first commit
This commit is contained in:
@@ -0,0 +1,293 @@
|
||||
/*=========================================================================================
|
||||
File Name: swiper.js
|
||||
Description: swiper plugin
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
$(document).ready(function () {
|
||||
//initialize swiper when document ready
|
||||
|
||||
// default
|
||||
var mySwiper = new Swiper('.swiper-default');
|
||||
|
||||
// navigation
|
||||
var mySwiper1 = new Swiper('.swiper-navigations', {
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// pagination
|
||||
var mySwiper2 = new Swiper('.swiper-paginations', {
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
});
|
||||
|
||||
// progress
|
||||
var mySwiper3 = new Swiper('.swiper-progress', {
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'progressbar',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// multiple
|
||||
var mySwiper4 = new Swiper('.swiper-multiple', {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// multi row
|
||||
var mySwiper5 = new Swiper('.swiper-multi-row', {
|
||||
slidesPerView: 3,
|
||||
slidesPerColumn: 2,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// centered slides option-1
|
||||
var mySwiperOpt1 = new Swiper('.swiper-centered-slides', {
|
||||
slidesPerView: 'auto',
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// centered slides option-2
|
||||
|
||||
var swiperLength = $(".swiper-slide").length;
|
||||
if (swiperLength) {
|
||||
swiperLength = Math.floor(swiperLength / 2)
|
||||
}
|
||||
|
||||
var mySwiperOpt2 = new Swiper('.swiper-centered-slides-2', {
|
||||
slidesPerView: 'auto',
|
||||
initialSlide: swiperLength,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
slideToClickedSlide: true,
|
||||
});
|
||||
activeSlide(swiperLength);
|
||||
|
||||
// Active slide change on swipe
|
||||
mySwiper.on('slideChange', function () {
|
||||
activeSlide(mySwiper.realIndex);
|
||||
});
|
||||
|
||||
//add class active content of active slide
|
||||
function activeSlide(index) {
|
||||
var slideEl = mySwiper.slides[index]
|
||||
var slideId = $(slideEl).attr('id');
|
||||
$(".wrapper-content").removeClass("active");
|
||||
$("[data-faq=" + slideId + "]").addClass('active')
|
||||
};
|
||||
|
||||
// fade effect
|
||||
var mySwiper7 = new Swiper('.swiper-fade-effect', {
|
||||
spaceBetween: 30,
|
||||
effect: 'fade',
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// cube effect
|
||||
var mySwiper8 = new Swiper('.swiper-cube-effect', {
|
||||
effect: 'cube',
|
||||
grabCursor: true,
|
||||
cubeEffect: {
|
||||
shadow: true,
|
||||
slideShadows: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
});
|
||||
|
||||
// coverflow effect
|
||||
var mySwiper9 = new Swiper('.swiper-coverflow', {
|
||||
effect: 'coverflow',
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 'auto',
|
||||
coverflowEffect: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows: true,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
});
|
||||
|
||||
// autoplay
|
||||
var mySwiper10 = new Swiper('.swiper-autoplay', {
|
||||
spaceBetween: 30,
|
||||
centeredSlides: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// gallery
|
||||
var galleryThumbs = new Swiper('.gallery-thumbs', {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
freeMode: true,
|
||||
watchSlidesVisibility: true,
|
||||
watchSlidesProgress: true,
|
||||
});
|
||||
var galleryTop = new Swiper('.gallery-top', {
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
thumbs: {
|
||||
swiper: galleryThumbs
|
||||
}
|
||||
});
|
||||
|
||||
// parallax
|
||||
var mySwiper12 = new Swiper('.swiper-parallax', {
|
||||
speed: 600,
|
||||
parallax: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// lazy loading
|
||||
var mySwiper13 = new Swiper('.swiper-lazy-loading', {
|
||||
// Enable lazy loading
|
||||
lazy: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
// Responsive Breakpoints
|
||||
var mySwiper14 = new Swiper('.swiper-responsive-breakpoints', {
|
||||
slidesPerView: 5,
|
||||
spaceBetween: 50,
|
||||
// init: false,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 40,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
320: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// virtual slides
|
||||
var appendNumber = 600;
|
||||
var prependNumber = 1;
|
||||
var mySwiper15 = new Swiper('.swiper-virtual', {
|
||||
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'fraction',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
virtual: {
|
||||
slides: (function () {
|
||||
var slides = [];
|
||||
for (var i = 0; i < 600; i += 1) {
|
||||
slides.push('Slide ' + (i + 1));
|
||||
}
|
||||
return slides;
|
||||
}()),
|
||||
},
|
||||
});
|
||||
$('.slide-1').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
mySwiper15.slideTo(0, 0);
|
||||
});
|
||||
$('.slide-250').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
mySwiper15.slideTo(249, 0);
|
||||
});
|
||||
$('.slide-500').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
mySwiper15.slideTo(499, 0);
|
||||
});
|
||||
$('.prepend-2-slides').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
mySwiper15.virtual.prependSlide([
|
||||
'Slide ' + (--prependNumber),
|
||||
'Slide ' + (--prependNumber)
|
||||
]);
|
||||
});
|
||||
$('.append-slide').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
mySwiper15.virtual.appendSlide('Slide ' + (++appendNumber));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user