https://crustyfood.fr/js/slider.js

1var slideshowDuration = 4000;
2var slideshow=$('.main-content .slideshow');
3
4function slideshowSwitch(slideshow,index,auto){
5  if(slideshow.data('wait')) return;
6
7  var slides = slideshow.find('.slide');
8  var pages = slideshow.find('.pagination');
9  var activeSlide = slides.filter('.is-active');
10  var activeSlideImage = activeSlide.find('.image-container');
11  var newSlide = slides.eq(index);
12  var newSlideImage = newSlide.find('.image-container');
13  var newSlideContent = newSlide.find('.slide-content');
14  var newSlideElements=newSlide.find('.caption > *');
15  if(newSlide.is(activeSlide))return;
16
17  newSlide.addClass('is-new');
18  var timeout=slideshow.data('timeout');
19  clearTimeout(timeout);
20  slideshow.data('wait',true);
21  var transition=slideshow.attr('data-transition');
22  if(transition=='fade'){
23    newSlide.css({
24      display:'block',
25      zIndex:2
26    });
27    newSlideImage.css({
28      opacity:0
29    });
30
31    TweenMax.to(newSlideImage,1,{
32      alpha:1,
33      onComplete:function(){
34        newSlide.addClass('is-active').removeClass('is-new');
35        activeSlide.removeClass('is-active');
36        newSlide.css({display:'',zIndex:''});
37        newSlideImage.css({opacity:''});
38        slideshow.find('.pagination').trigger('check');
39        slideshow.data('wait',false);
40        if(auto){
41          timeout=setTimeout(function(){
42            slideshowNext(slideshow,false,true);
43          },slideshowDuration);
44          slideshow.data('timeout',timeout);}}});
45  } else {
46    if(newSlide.index()>activeSlide.index()){
47      var newSlideRight=0;
48      var newSlideLeft='auto';
49      var newSlideImageRight=-slideshow.width()/8;
50      var newSlideImageLeft='auto';
51      var newSlideImageToRight=0;
52      var newSlideImageToLeft='auto';
53      var newSlideContentLeft='auto';
54      var newSlideContentRight=0;
55      var activeSlideImageLeft=-slideshow.width()/4;
56    } else {
57      var newSlideRight='';
58      var newSlideLeft=0;
59      var newSlideImageRight='auto';
60      var newSlideImageLeft=-slideshow.width()/8;
61      var newSlideImageToRight='';
62      var newSlideImageToLeft=0;
63      var newSlideContentLeft=0;
64      var newSlideContentRight='auto';
65      var activeSlideImageLeft=slideshow.width()/4;
66    }
67
68    newSlide.css({
69      display:'block',
70      width:0,
71      right:newSlideRight,
72      left:newSlideLeft
73      ,zIndex:2
74    });
75
76    newSlideImage.css({
77      width:slideshow.width(),
78      right:newSlideImageRight,
79      left:newSlideImageLeft
80    });
81
82    newSlideContent.css({
83      width:slideshow.width(),
84      left:newSlideContentLeft,
85      right:newSlideContentRight
86    });
87
88    activeSlideImage.css({
89      left:0
90    });
91
92    TweenMax.set(newSlideElements,{y:20,force3D:true});
93    TweenMax.to(activeSlideImage,1,{
94      left:activeSlideImageLeft,
95      ease:Power3.easeInOut
96    });
97
98    TweenMax.to(newSlide,1,{
99      width:slideshow.width(),
100      ease:Power3.easeInOut
101    });
102
103    TweenMax.to(newSlideImage,1,{
104      right:newSlideImageToRight,
105      left:newSlideImageToLeft,
106      ease:Power3.easeInOut
107    });
108
109    TweenMax.staggerFromTo(newSlideElements,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3.easeOut,force3D:true,delay:0.6},0.1,function(){
110      newSlide.addClass('is-active').removeClass('is-new');
111      activeSlide.removeClass('is-active');
112      newSlide.css({
113        display:'',
114        width:'',
115        left:'',
116        zIndex:''
117      });
118
119      newSlideImage.css({
120        width:'',
121        right:'',
122        left:''
123      });
124
125      newSlideContent.css({
126        width:'',
127        left:''
128      });
129
130      newSlideElements.css({
131        opacity:'',
132        transform:''
133      });
134
135      activeSlideImage.css({
136        left:''
137      });
138
139      slideshow.find('.pagination').trigger('check');
140      slideshow.data('wait',false);
141      if(auto){
142        timeout=setTimeout(function(){
143          slideshowNext(slideshow,false,true);
144        },slideshowDuration);
145        slideshow.data('timeout',timeout);
146      }
147    });

148  }
149}
150
151function slideshowNext(slideshow,previous,auto){
152  var slides=slideshow.find('.slide');
153  var activeSlide=slides.filter('.is-active');
154  var newSlide=null;
155  if(previous){
156    newSlide=activeSlide.prev('.slide');
157    if(newSlide.length === 0) {
158      newSlide=slides.last();
159    }
160  } else {
161    newSlide=activeSlide.next('.slide');
162    if(newSlide.length==0)
163      newSlide=slides.filter('.slide').first();
164  }
165
166  slideshowSwitch(slideshow,newSlide.index(),auto);
167}
168
169function homeSlideshowParallax(){
170  var scrollTop=$(window).scrollTop();
171  if(scrollTop>windowHeight) return;
172  var inner=slideshow.find('.slideshow-inner');
173  var newHeight=windowHeight-(scrollTop/2);
174  var newTop=scrollTop*0.8;
175
176  inner.css({
177    transform:'translateY('+newTop+'px)',height:newHeight
178  });
179}
180
181$(document).ready(function() {
182 $('.slide').addClass('is-loaded');
183
184 $('.slideshow .arrows .arrow').on('click',function(){
185  slideshowNext($(this).closest('.slideshow'),$(this).hasClass('prev'));
186});
187
188 $('.slideshow .pagination .item').on('click',function(){
189  slideshowSwitch($(this).closest('.slideshow'),$(this).index());
190});
191
192 $('.slideshow .pagination').on('check',function(){
193  var slideshow=$(this).closest('.slideshow');
194  var pages=$(this).find('.item');
195  var index=slideshow.find('.slides .is-active').index();
196  pages.removeClass('is-active');
197  pages.eq(index).addClass('is-active');
198});
199
200/* Lazyloading
201$('.slideshow').each(function(){
202  var slideshow=$(this);
203  var images=slideshow.find('.image').not('.is-loaded');
204  images.on('loaded',function(){
205    var image=$(this);
206    var slide=image.closest('.slide');
207    slide.addClass('is-loaded');
208  });
209*/
210
211var timeout=setTimeout(function(){
212  slideshowNext(slideshow,false,true);
213},slideshowDuration);
214
215slideshow.data('timeout',timeout);
216});
217
218if($('.main-content .slideshow').length > 1) {
219  $(window).on('scroll',homeSlideshowParallax);
220}