1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
var MainTabWindows = $(".MainTabWindows");
var NavbarIconWrap = $(".NavbarIconWrap");
var Navbar = $(".Navbar");
var NavbarLine = $(".NavbarLine");
/******
NAVBAR
*****/
var $el, leftPos, newWidth;
NavbarLine
.css("left", $(".ActiveTab").position().left)
.data("origLeft", NavbarLine.position().left)
.data("origWidth", NavbarLine.width());
NavbarIconWrap.on("click", function () {
NavbarIconWrap.removeClass("ActiveTab");
$(this).addClass("ActiveTab");
var index = $(this).attr('id');
MainTabWindows.slick('slickGoTo', index);
//$('.MainTabWindows').flickity().flickity('select', index);
$el = $(this);
leftPos = $el.position().left;
NavbarLine.stop().animate({
left: leftPos,
width: newWidth
}, 300);
});
/********
FLICKITY
*******/
MainTabWindows.slick({
initialSlide: 2,
mobileFirst: true,
nextArrow: "",
prevArrow: "",
infinite: false,
zIndex: 500
});
MainTabWindows.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
//console.log(nextSlide);
NavbarIconWrap.removeClass("ActiveTab");
$el = $("#" + nextSlide);
$el.addClass("ActiveTab");
leftPos = $el.position().left;
NavbarLine.stop().animate({
left: leftPos,
width: newWidth
}, 300);
});
/*
$('.MainTabWindows').flickity({
cellAlign: 'left',
prevNextButtons: false,
pageDots: false,
friction: 0.3,
dragThreshold: ($("body").width() * 0.5),
initialIndex: 2,
wrapAround: true,
maxSwipeWidth: 0,
on: {
change: function (index) {
$(".NavbarIconWrap").removeClass("ActiveTab");
$el = $("#" + index);
$el.addClass("ActiveTab");
leftPos = $el.position().left;
$magicLine.stop().animate({
left: leftPos,
width: newWidth
}, 300);
},
dragStart: function () {
$(".ActiveTab").css({ transform: 'scale(1.05)' });
},
dragEnd: function () {
$(".NavbarIconWrap").css({ transform: 'scale(1.0)' });
}/*,
scroll: function (event, progress) {
var TotalWidth = $("body").width();
console.log(progress / 10);
leftPos = ((progress / 1000) * TotalWidth + 'px');
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}*
}
});
*/
|
