https://icom.museum/wp-content/themes/icom/assets/js/custom-slick.js

1jQuery(document).ready(function($) {
2    $('.news-slider-2025').slick({
3        infinite: true,
4        slidesToShow: 1,
5        slidesToScroll: 1,
6        arrows: true,
7        dots: false,
8        autoplay: true,
9        autoplaySpeed: 5000,
10        prevArrow: '<button type="button" class="slick-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Angle Left</title> <desc>A line styled icon from Orion Icon Library.</desc> <path data-name="layer1" fill="none" stroke="#1343a5" stroke-miterlimit="10" stroke-width="2" d="M39 20.006L25 32l14 12.006" stroke-linejoin="round" stroke-linecap="round"></path></svg></button>',
11        nextArrow: '<button type="button" class="slick-next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Angle Right</title> <desc>A line styled icon from Orion Icon Library.</desc> <path data-name="layer1" fill="none" stroke="#1343a5" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="round" stroke-linecap="round"></path></svg></button>'
12    });
13});
14
15jQuery(document).ready(function($) {
16    $('.news-category-slider').slick({
17        vertical: false, // Remplace `vertical: true` par `false`
18        slidesToShow: 4, // Ajuste le nombre de slides visibles
19        slidesToScroll: 3,
20        infinite: true,
21          centerMode: false, // Désactive le centrage pour garder des dimensions fixes
22          variableWidth: true, // Désactive la largeur variable
23        arrows: true,
24          prevArrow: '<button type="button" class="slick-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Angle Left</title> <desc>A line styled icon from Orion Icon Library.</desc> <path data-name="layer1" fill="none" stroke="#1343a5" stroke-miterlimit="10" stroke-width="2" d="M39 20.006L25 32l14 12.006" stroke-linejoin="round" stroke-linecap="round"></path></svg></button>',
25        nextArrow: '<button type="button" class="slick-next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" aria-describedby="desc" role="img" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Angle Right</title> <desc>A line styled icon from Orion Icon Library.</desc> <path data-name="layer1" fill="none" stroke="#1343a5" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="round" stroke-linecap="round"></path></svg></button>',      
26          responsive: [
27            {
28                breakpoint: 1024,
29                settings: {
30                    slidesToShow: 3 // Réduit les slides visibles sur écrans moyens
31                }
32            },
33            {
34                breakpoint: 768,
35                settings: {
36                    slidesToShow: 2 // Réduit encore sur petits écrans
37                }
38            },
39            {
40                breakpoint: 480,
41                settings: {
42                    slidesToShow: 1 // Une seule slide sur très petits écrans
43                }
44            }
45        ]
46    });
47});
48
49jQuery(document).ready(function($) {
50    function animateNumbers() {
51        $('.icom-number').each(function() {
52            let $this = $(this);
53            let target = parseInt($this.attr('data-target'));
54            let count = 0;
55            let speed = Math.floor(2000 / target); // Ajuste la vitesse en fonction du nombre
56
57            let interval = setInterval(function() {
58                if (count >= target) {
59                    clearInterval(interval);
60                    $this.text(target);
61                } else {
62                    count += Math.ceil(target / 100); // Augmente par petites étapes
63                    $this.text(count);
64                }
65            }, speed);
66        });
67    }
68
69    // Lancer l'animation lorsque la section est visible à l'écran
70    function checkVisibility() {
71        let section = $('.icom-section');
72        if (section.length > 0) {
73            let windowHeight = $(window).height();
74            let sectionTop = section.offset().top;
75            let scrollTop = $(window).scrollTop();
76
77            if (scrollTop + windowHeight > sectionTop) {
78                animateNumbers();
79                $(window).off('scroll', checkVisibility); // Supprime l'événement après exécution
80            }
81        }
82    }
83
84    $(window).on('scroll', checkVisibility);
85    checkVisibility(); // Vérifier au chargement si déjà visible
86});
87jQuery(document).ready(function($) {
88    function animateBlocks() {
89        $('.section-block').each(function(index) {
90            var elementTop = $(this).offset().top;
91            var windowBottom = $(window).scrollTop() + $(window).height();
92
93            if (elementTop < windowBottom - 50) {
94                $(this).delay(200 * index).animate({ opacity: 1, transform: 'translateY(0px)' }, 600);
95            }
96        });
97    }
98
99    $('.section-block').css({
100        opacity: 0,
101        transform: 'translateY(30px)'
102    });

103
104    $(window).on('scroll', function() {
105        animateBlocks();
106    });
107
108    animateBlocks(); // Exécuter immédiatement au chargement si visible
109});