https://boutique.lescargotgourmand.ca/js/homepage.js?v=030935

1// home page Comelin
2if (document.getElementsByTagName('vueper-slides').length 
3|| document.getElementsByTagName('brand-slider').length 
4|| document.getElementsByTagName('banner-slider')) {
5    InitSlider();
6}
7
8function InitSlider() {
9    if (!window._components) {
10        window._components = {};
11    }
12    const { VueperSlides, VueperSlide } = vueperslides;
13    window._components.VueperSlides = VueperSlides;
14    window._components.VueperSlide = VueperSlide;
15
16    // Banner slider component
17    window._components.bannerSlider = Vue.component('banner-slider',
18        {
19            components: { VueperSlides, VueperSlide },
20            template: `<vueper-slides v-if="banners && banners.length > 0" 
21                   id="banner-slider"
22                   class="no-shadow"
23                   :autoplay="banners.length > 1"
24                   :duration="transitionDuration"
25                   :arrows="arrows" 
26                   :bullets="bullets" 
27                   :touchable="banners.length > 1"
28                   :slide-ratio="slideRatio">
29        <vueper-slide v-for="(banner, index) in banners" :key="index" :content="banner.html"></vueper-slide>
30    </vueper-slides>`,
31            data: function() {
32                return {
33                    banners: null,
34                    transitionDuration: 2000,
35                    slideRatio: 0.25,
36                    arrows: false,
37                    bullets: false
38                }
39            },
40            mounted() {
41                // Get banner data from server-side injected variable
42                if (window._homepageBanners) {
43                    this.transitionDuration = window._homepageBanners.transitionDuration || 2000;
44                    if (window._homepageBanners.slideRatio) {
45                        this.slideRatio = 1 / window._homepageBanners.slideRatio;
46                    }
47                    this.arrows = window._homepageBanners.arrows || false;
48                    this.bullets = window._homepageBanners.bullets || false;
49                    
50                    // Banners now come with pre-generated HTML from the server
51                    this.banners = window._homepageBanners.banners.map(b => ({
52                        html: b.html,
53                        title: b.title
54                    }));
55                }
56            }
57        });
58
59    // using https://github.com/antoniandre/vueper-slides/
60    window._components.bs = Vue.component('brand-slider',
61        {
62            components: { VueperSlides, VueperSlide },
63            template: `<vueper-slides v-if=slides id="brandSlider" autoplay class="no-shadow"
64                   :duration ="2000"
65                   :arrows="false" 
66                   :bullets="false" 
67                   :visible-slides="6"
68                   :gap="3"
69:touchable="false"
70:initSlide=2
71                   :slide-ratio="1 / 6"
72                   :breakpoints="{ 800: { visibleSlides: 2, slideMultiple: 1, slideRatio:0.5 } }">
73        <vueper-slide v-for="b of slides" :key="b.Id" :content="b.Html"></vueper-slide>
74    </vueper-slides>`,
75            data: function() {
76                return {
77                    slides: null
78                }
79            },
80            mounted() {
81                var instance = this;
82                $.ajax('/Api/BrandImage?nb=20').done(function(e) {
83                    shuffle(e);
84                    for (var brand of e) {
85                        brand.Html = "<a href='" + brand.Url + "'><img src='" +  brand.Image + "?size=150' title='" + brand.Title + "' alt='" + brand.Title + "' /></a>";
86                    }
87                    instance.slides = e;
88                    // duplicate the list for smoother transaction since the plugin do not do loop properly
89                    const nb = e.length;
90                    for (var i = 0; i < nb; i++) {
91                        const copy = Object.assign({}, e[i]);
92                        copy.Id = -copy.Id; // so id are unique
93                        instance.slides.push(copy);
94
95                    }
96                });
97            }
98        });
99}