151 lines
4.5 KiB
JavaScript
151 lines
4.5 KiB
JavaScript
$(document).ready(function()
|
|
{
|
|
function click(item)
|
|
{
|
|
let slideImageAttr;
|
|
if($(window).width() < 768) {
|
|
slideImageAttr = "data-sm-image"
|
|
} else if($(window).width() > 768 && $(window).width() < 1280) {
|
|
slideImageAttr = "data-tb-image"
|
|
} else {
|
|
slideImageAttr = "data-image"
|
|
}
|
|
|
|
$(item).addClass("active").siblings().removeClass("active");
|
|
|
|
$('.slider_active_title').fadeOut(150, function() {
|
|
$(".slider_active_title").text($(item).attr("data-title")).fadeIn(150);
|
|
});
|
|
|
|
$('.main_slider-image').fadeOut(150, function() {
|
|
$('.main_slider-image').attr("src", $(item).attr(slideImageAttr)).fadeIn(150);
|
|
});
|
|
}
|
|
|
|
$("#main_slider .slider_item").on("click", function(){
|
|
if (!$(this).hasClass("active")) {
|
|
click(this);
|
|
}
|
|
|
|
});
|
|
|
|
$('#main_slider .slider_item:first-child').click();
|
|
|
|
let item_width = $("#main_slider .slider_item").outerWidth();
|
|
|
|
// Scroll slide list
|
|
const scrolledContainer = $('.slider_list .scrolled');
|
|
const slidesToScroll = parseInt($(".slider_list").attr("data-scrolled"));
|
|
let slidesScrolled = parseInt($(".slider_list").attr("data-visible"));
|
|
const slidesCount = $(".slider_list .slider_item").length;
|
|
let isClicked = false;
|
|
console.log(slidesCount);
|
|
$(".slider_navto a").on("click", function(e) {
|
|
e.preventDefault();
|
|
if(!isClicked) {
|
|
descktopMove();
|
|
}
|
|
});
|
|
|
|
function descktopMove() {
|
|
isClicked = true;
|
|
let current_left_offset = $(scrolledContainer).scrollLeft();
|
|
if(slidesScrolled <= slidesCount - slidesToScroll) {
|
|
slidesScrolled = slidesScrolled + slidesToScroll;
|
|
$(".slider_list").attr("data-visible", slidesScrolled);
|
|
$(scrolledContainer).animate( { scrollLeft: current_left_offset + item_width * slidesToScroll}, 250, function() {
|
|
isClicked = false;
|
|
|
|
});
|
|
|
|
} else if(slidesScrolled == slidesCount) {
|
|
console.log("start");
|
|
$(".slider_list").attr("data-visible", slidesToScroll);
|
|
$(scrolledContainer).animate( { scrollLeft: 0}, 250, function() {
|
|
isClicked = false;
|
|
slidesScrolled = slidesToScroll;
|
|
});
|
|
} else {
|
|
$(".slider_list").attr("data-visible", slidesScrolled + (slidesCount - slidesScrolled));
|
|
let diff = slidesCount - slidesScrolled;
|
|
$(scrolledContainer).animate( { scrollLeft: current_left_offset + item_width * (diff)}, 250, function() {
|
|
isClicked = false;
|
|
slidesScrolled = slidesScrolled + (diff);
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
// Touch Events
|
|
function nextSlide() {
|
|
let current_left_offset = $(scrolledContainer).scrollLeft();
|
|
if($("#main_slider .slider_item.active").next().hasClass( "slider_item" )) {
|
|
current_left_offset = current_left_offset + item_width;
|
|
$("#main_slider .slider_item.active").next().click();
|
|
$(scrolledContainer).animate( { scrollLeft: current_left_offset }, 250);
|
|
|
|
} else {
|
|
$('#main_slider .slider_item:first-child').click();
|
|
current_left_offset = 0;
|
|
$(scrolledContainer).animate( { scrollLeft: current_left_offset }, 250);
|
|
}
|
|
}
|
|
|
|
function prevSlide() {
|
|
let current_left_offset = $(scrolledContainer).scrollLeft();
|
|
|
|
if (!$("#main_slider .slider_item:first-child").hasClass( "active" )) {
|
|
$("#main_slider .slider_item.active").prev().click();
|
|
current_left_offset = current_left_offset - item_width;
|
|
$(scrolledContainer).animate( { scrollLeft: current_left_offset }, 250);
|
|
}
|
|
}
|
|
|
|
$(".main_slider_swiper").on('touchstart', function(e) {
|
|
handleTouchStart(e);
|
|
});
|
|
$(".main_slider_swiper").on('touchmove', function(e) {
|
|
handleTouchMove(e);
|
|
});
|
|
|
|
var xDown = null;
|
|
var yDown = null;
|
|
|
|
function getTouches(evt)
|
|
{
|
|
return evt.touches || // browser API
|
|
evt.originalEvent.touches; // jQuery
|
|
}
|
|
|
|
function handleTouchStart(evt) {
|
|
const firstTouch = getTouches(evt)[0];
|
|
xDown = firstTouch.clientX;
|
|
yDown = firstTouch.clientY;
|
|
};
|
|
|
|
function handleTouchMove(evt)
|
|
{
|
|
if ( ! xDown || ! yDown )
|
|
{
|
|
return;
|
|
}
|
|
|
|
var xUp = evt.touches[0].clientX;
|
|
var yUp = evt.touches[0].clientY;
|
|
|
|
var xDiff = xDown - xUp;
|
|
var yDiff = yDown - yUp;
|
|
|
|
if ( Math.abs( xDiff ) > Math.abs( yDiff ) )
|
|
{
|
|
if ( xDiff > 0 ) {
|
|
nextSlide();
|
|
} else {
|
|
prevSlide();
|
|
}
|
|
}
|
|
|
|
xDown = null;
|
|
yDown = null;
|
|
};
|
|
}); |