début corrections 2024, ajout d'un carousel dans les lecteurs de projets, suppression des animations de l'index

user/themes/figureslibres-v2/css/theme.css

@@ -145,7 +145,7 @@ a, a:active, a:focus, a:visited {
 .picto {
   display: block;
   cursor: pointer;
-  background-color: #0b1117;
+  background-color: #0e1229;
 }
 
 .picto-url {
@@ -177,7 +177,7 @@ em {
 
 body {
   overflow-x: hidden;
-  color: #0b1117;
+  color: #0e1229;
   background-color: #f5f5f5;
 }
 body header {
@@ -204,7 +204,7 @@ body header #nav-container #burger {
 }
 body header nav {
   position: absolute;
-  background-color: #0b1117;
+  background-color: #0e1229;
   top: -100vh;
   width: 100%;
   height: calc(100vh - 7vh);
@@ -240,7 +240,7 @@ body header nav ul li a {
   font-size: 2.2em;
 }
 body header nav ul li.selected a {
-  color: #0b1117;
+  color: #0e1229;
   background-color: #f5f5f5;
 }
 body header nav.mobile-nav-open {
@@ -298,7 +298,7 @@ body main .content .projet-card a {
   width: 100%;
 }
 body main .content .projet-card a figcaption {
-  color: #0b1117;
+  color: #0e1229;
   background-color: transparent;
   padding: 0;
   margin-top: 5px;
@@ -348,9 +348,6 @@ body main #index-content #main-p-index #figureslibres {
   font-family: Syne, sans-serif;
   font-weight: bold;
 }
-body main #index-content #main-p-index #figureslibres canvas {
-  transform: translateX(calc(-100% + 10px)) translateY(-2px);
-}
 body main #index-content #main-p-index #publique {
   font-family: PlayfairDisplay, serif;
   font-style: italic;
@@ -360,17 +357,11 @@ body main #index-content #main-p-index #sociale {
   font-weight: bold;
   font-style: italic;
 }
-body main #index-content #main-p-index #sociale canvas {
-  transform: translateX(calc(-100% + 15px)) translateY(0px);
-}
 body main #index-content #main-p-index #culturelle {
   font-family: Avara, serif;
   font-weight: bold;
   font-style: italic;
 }
-body main #index-content #main-p-index #culturelle canvas {
-  transform: translateX(calc(-100% + 15px)) translateY(2px);
-}
 body main #index-content #main-p-index #logicielslibres {
   font-family: Rumeur, sans-serif;
   font-weight: bold;
@@ -401,7 +392,7 @@ body main #index-content #extrait-projets > div div:last-of-type p {
   justify-content: center;
 }
 body main #index-content #extrait-projets > div div:last-of-type p span {
-  border-bottom: solid 1px #0b1117;
+  border-bottom: solid 1px #0e1229;
   padding-bottom: 1px;
 }
 body main #index-content #extrait-projets > div div:last-of-type p span #publique-link {
@@ -435,9 +426,6 @@ body main #index-content #second-p-index #commanditaires {
   font-family: Moche, sans-serif;
   font-weight: bold;
 }
-body main #index-content #second-p-index #commanditaires canvas {
-  transform: translateX(calc(-100% + 10px)) translateY(0px);
-}
 body main #index-content #second-p-index #projets {
   font-family: Redaction50, serif;
   font-weight: bold;
@@ -456,7 +444,8 @@ body main #index-content #commanditaires-grid img {
 }
 body main #index-content #arrow-container {
   margin-top: 30px;
-  transition: transform 0.8s ease-out;
+  margin-bottom: 0vh;
+  transition: transform 0.8s ease-out, margin-bottom 0.4s ease-out;
 }
 body main #index-content #arrow-container .picto {
   width: 45px;
@@ -469,18 +458,13 @@ body main #index-content .container {
   overflow-y: hidden;
   height: auto;
   max-height: 0vh;
-  margin-top: 0px;
+  margin-top: 0vh;
   opacity: 0;
   transition: opacity 0.4s ease-out, 0.7s 0.4s ease-out, max-height 1.2s ease-out, margin-top 1s ease-out;
 }
 body main #index-content a {
   text-decoration: none;
 }
-body main #index-content canvas {
-  position: absolute;
-  transform: translateX(calc(-100% + 15px)) translateY(-2px);
-  transition: width 0.4s ease-out, height 0.4s ease-out;
-}
 body main #projets-index {
   width: 100%;
 }
@@ -686,8 +670,8 @@ body main #reader hr {
   margin-bottom: 2vh;
   width: 66%;
   opacity: 0.5;
-  color: #0b1117;
+  color: #0e1229;
-  background-color: #0b1117;
+  background-color: #0e1229;
 }
 body main #reader #related-pages {
   margin-top: 5vh;
@@ -710,8 +694,50 @@ body main #reader #related-pages #related-grid {
 body main #reader #related-pages #related-grid .card-displayed {
   margin-top: 1.5vh;
 }
-body main #reader #carousel-container {
+body main #reader .swiper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(2px);
+  box-sizing: border-box;
+  z-index: 3;
   display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+body main #reader .swiper .swiper-wrapper {
+  z-index: 9;
+  display: flex;
+  align-items: center;
+}
+body main #reader .swiper .swiper-wrapper .swiper-slide {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body main #reader .swiper .swiper-wrapper .swiper-slide img {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+}
+body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
+  color: #0e1229;
+  padding: 2rem;
+  bottom: 5vh;
+  top: unset;
+}
+body main #reader .swiper #close-carousel {
+  width: calc(25px - 5px);
+  height: calc(23px - 5px);
+  position: absolute;
+  top: 5vh;
+  right: 5vh;
+  z-index: 10;
 }
 body footer {
   display: none;
@@ -731,7 +757,7 @@ body footer p {
 }
 body footer p a {
   display: block;
-  background: #0b1117;
+  background: #0e1229;
   height: 100%;
   width: 100%;
   font-family: Syne, Sans-serif;
@@ -751,7 +777,7 @@ body footer p a {
     width: 100%;
     box-sizing: border-box;
     padding: 10px;
-    background: #0b1117;
+    background: #0e1229;
     color: #f5f5f5;
     font-size: 0.75em;
     border-radius: 0 0 10px 10px;
@@ -827,7 +853,7 @@ body footer p a {
     margin-bottom: 5vh;
   }
   body main #reader h2#main-project-title {
-    font-size: 3.8em;
+    font-size: 2.9em;
   }
   body main #reader #info-project {
     margin-top: -6vh;
@@ -844,7 +870,7 @@ body footer p a {
     width: auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: 2% 4%;
+    grid-gap: 1em;
   }
   body main #reader #project-images-grid figure {
     margin-top: 0;
@@ -873,6 +899,10 @@ body footer p a {
     min-height: 80px !important;
     min-width: 15vw;
   }
+  body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
+    bottom: unset;
+    top: var(--swiper-navigation-top-offset, 50%);
+  }
   body footer {
     display: flex;
     align-items: center;
@@ -882,7 +912,7 @@ body footer p a {
     height: 4vh;
     right: 3vw;
     border-radius: 20px 20px 0 0;
-    background-color: #0b1117;
+    background-color: #0e1229;
   }
   body footer p {
     height: auto;
@@ -915,7 +945,7 @@ body footer p a {
   }
   body header nav ul li {
     width: auto;
-    color: #0b1117;
+    color: #0e1229;
     height: 0.95em;
     z-index: 0;
   }
@@ -943,7 +973,7 @@ body footer p a {
     width: 100%;
     padding: 4px 12px;
     transform: translateX(-12px) translateY(calc(-100% - 2px + 4px));
-    background-color: #0b1117;
+    background-color: #0e1229;
     border-radius: 15px;
     z-index: -1;
     transition: opacity 0.4s ease-out;
@@ -1070,7 +1100,7 @@ body footer p a {
 }
 @media only screen and (min-width: 1500px) {
   body main #index-content #main-p-index p {
-    font-size: 3.8em;
+    font-size: 2.9em;
   }
   body main #index-content #arrow-container {
     margin-top: 7vh;

user/themes/figureslibres-v2/js/libraries/blotter/liquidDistortMaterial.js

@@ -1,50 +0,0 @@
-(function(Blotter) {
-
-  Blotter.LiquidDistortMaterial = function() {
-    Blotter.Material.apply(this, arguments);
-  };
-
-  Blotter.LiquidDistortMaterial.prototype = Object.create(Blotter.Material.prototype);
-
-  Blotter._extendWithGettersSetters(Blotter.LiquidDistortMaterial.prototype, (function () {
-
-    function _mainImageSrc () {
-      var mainImageSrc = [
-        Blotter.Assets.Shaders.Noise3D,
-
-        "void mainImage( out vec4 mainImage, in vec2 fragCoord )",
-        "{",
-        "    // Setup ========================================================================",
-
-        "    vec2 uv = fragCoord.xy / uResolution.xy;",
-        "    float z = uSeed + uGlobalTime * uSpeed;",
-
-        "    uv += snoise(vec3(uv, z)) * uVolatility;",
-
-        "    mainImage = textTexture(uv);",
-
-        "}"
-      ].join("\n");
-
-      return mainImageSrc;
-    }
-
-    return {
-
-      constructor : Blotter.LiquidDistortMaterial,
-
-      init : function () {
-        this.mainImage = _mainImageSrc();
-        this.uniforms = {
-          uSpeed : { type : "1f", value : 1.0 },
-          uVolatility : { type : "1f", value : 0.15 },
-          uSeed : { type : "1f", value : 0.1 }
-        };
-      }
-    };
-
-  })());
-
-})(
-  this.Blotter
-);

user/themes/figureslibres-v2/js/script.js

@@ -6,7 +6,7 @@ $(document).ready( () => {
   hoverDesktopNavItems()
   if (currentPage.text().trim() == 'Accueil') {
     hideFooter()
-    animateText()
+    toggleIndexContent()
   } else if (currentPage.text().trim() == 'Projets' && $('main').children(":first").attr('id') != 'reader') {
     hideFooter()
     loadProjetIndex()
@@ -21,7 +21,6 @@ $(document).ready( () => {
 let isMobileNavOpen = false,
     isDesktopDevice = false,
     currentPage,
-    indexIsReady = false,
     filterObj = {
       publiqueCardsDisplayed : true,
       socialeCardsDisplayed : true,
@@ -66,8 +65,7 @@ function initBarba() {
     displayPictograms()
     $('html, body').scrollTop(0)
     if ($(data.next.container).attr('id') == 'index-content') {
-      animateText()
+      toggleIndexContent()
-      indexIsReady = false
     } else if ($(data.next.container).attr('id') == 'projets-index') {
       loadProjetIndex()
       filterWhenEntering()
@@ -281,8 +279,8 @@ function toggleIndexContent(closeEverything) {
     }
   })
 
-  $('#index-content canvas').click( function(event) {
+  $('#index-content .animateText').click( function(event) {
-    target = $(event.target).parent().attr('id')
+    target = $(event.target).attr('id')
     if (target == 'publique' || target == 'sociale' || target == 'culturelle') {
       toggleExtrait(target)
       return false
@@ -416,195 +414,6 @@ function hideContent(content) {
   }, 1200)
 }
 
-// index animation
-function animateText() {
-  waitForWebfonts(['Moche'], () => { // idk why listing only one font makes it work....
-    // For each item
-    $(".animateText").each(function(i, e) {
-      $(e).contents().wrap('<span></span>')
-      $('#main-p-index span').css('color', 'transparent')
-      $('#second-p-index span').css('color', 'transparent')
-      // Initialize a new LiquidText instance
-      var liquidText = new LiquidText(
-        e, // Element
-        0.0, // Liquid Volatility
-        0.5 // Speed
-      ).start()
-    })
-    toggleIndexContent()
-    displayIndexWhenReady()
-  })
-}
-
-let globalMaterial = new Blotter.LiquidDistortMaterial()
-
-let globalBlotter = new Blotter(globalMaterial, {
-  texts: [],
-  autostart: false,
-  autobuild: false
-})
-
-class LiquidText {
-  constructor(element, volatility, speed) {
-    this.element = element
-    this.text = element.text
-    this.fontSize = parseInt($(element).css('font-size'))
-    this.fontStack = $(element).css('font-family')
-    this.fontWeight = $(element).css('font-weight')
-    this.fontColor = $(element).css('color')
-    this.material = globalMaterial
-    this.hoverDuration = 0.35
-    this.hoverEase = Linear.easeIn
-    this.liquidVolatility = volatility
-    this.liquidSpeed = speed
-    this.scope = null
-    this.blotter = globalBlotter
-    this.blotterText = null
-    this.onResize = this.onResize.bind(this)
-    this.seed = 0.1
-
-    window.addEventListener('resize', this.onResize)
-
-    this.initialize()
-
-  }
-  initialize() {
-    let blotter = this.blotter
-    let text = new Blotter.Text(this.text, {
-      family: this.fontStack,
-      size: this.fontSize,
-      fill: this.fontColor,
-      weight: this.fontWeight,
-      paddingLeft: 15,
-      paddingRight: 15
-    })
-    this.blotterText = text
-    this.material.uniforms.uSpeed.value = this.liquidSpeed
-    this.material.uniforms.uVolatility.value = this.liquidVolatility
-    blotter.addText(text)
-
-    blotter.needsUpdate = true
-
-    var scope = blotter.forText(text)
-
-    this.scope = scope
-
-    scope.appendTo(this.element)
-
-    this.material.needsUpdate = true
-    gsap.fromTo(this.material.uniforms.uVolatility, this.hoverDuration, {
-      value: 0,
-      ease: this.hoverEase
-    }, {
-      value: this.liquidVolatility,
-      ease: this.hoverEase
-    })
-
-    this.element.onmouseenter = (event) => {
-      this.scope.material.needsUpdate = true
-      gsap.fromTo(this.scope.material.uniforms.uVolatility, this.hoverDuration, {
-        value: 0,
-        ease: this.hoverEase
-      }, {
-        value: this.liquidVolatility + 0.04,
-        ease: this.hoverEase
-      })
-    }
-
-    this.element.onmouseleave = (event) => {
-      gsap.fromTo(this.scope.material.uniforms.uVolatility, this.hoverDuration, {
-        value: this.scope.material.uniforms.uVolatility.value,
-        ease: this.hoverEase
-      }, {
-        value: this.liquidVolatility,
-        ease: this.hoverEase,
-        onComplete: () => {
-          this.scope.material.needsUpdate = true
-        }
-      })
-    }
-  }
-  stop() {
-    this.blotter.stop()
-  }
-  start() {
-    this.blotter.start()
-  }
-  onResize() {
-    let text = this.blotterText
-    let time = 100
-    let timer
-    if(timer) clearTimeout(timer)
-    timer = setTimeout(() => {
-      text.properties.size = parseInt($(this.element).css('font-size'))
-      text.needsUpdate = true
-    }, time, event)
-  }
-}
-
-function displayIndexWhenReady() {
-  globalBlotter.on('update', () => {
-    if (!indexIsReady) {
-      indexIsReady = true
-      $('#loader-index').fadeOut(1400)
-    }
-  })
-}
-
-function waitForWebfonts(fonts, callback) {
-  var loadedFonts = 0
-  for (var i = 0, l = fonts.length; i < l; ++i) {
-    ((font) => {
-      var node = document.createElement('span')
-      // Characters that vary significantly among different fonts
-      node.innerHTML = 'giItT1WQy@!-/#'
-      // Visible - so we can measure it - but not on the screen
-      node.style.position = 'absolute'
-      node.style.left = '-10000px'
-      node.style.top = '-10000px'
-      // Large font size makes even subtle changes obvious
-      node.style.fontSize = '300px'
-      // Reset any font properties
-      node.style.fontFamily = 'sans-serif'
-      node.style.fontVariant = 'normal'
-      node.style.fontStyle = 'normal'
-      node.style.fontWeight = 'normal'
-      node.style.letterSpacing = '0'
-      document.body.appendChild(node)
-
-      // Remember width with no applied web font
-      var width = node.offsetWidth
-
-      node.style.fontFamily = font + ', sans-serif'
-
-      var interval
-
-      function checkFont() {
-        // Compare current width with original width
-        if (node && node.offsetWidth != width) {
-          ++loadedFonts
-          node.parentNode.removeChild(node)
-          node = null
-        }
-
-        // If all fonts have been loaded
-        if (loadedFonts >= fonts.length) {
-          if (interval) {
-            clearInterval(interval)
-          }
-          if (loadedFonts == fonts.length) {
-            callback()
-            return true
-          }
-        }
-      }
-
-      if (!checkFont()) {
-        interval = setInterval(checkFont, 50)
-      }
-    })(fonts[i])
-  }
-}
 
 // display project grid
 function toggleCategory(category) {
@@ -756,12 +565,43 @@ function filterWhenEntering() {
 
 // display reader
 function displayReader() {
-  $('.owl-carousel').owlCarousel()
+  const swiper = new Swiper('.swiper', {
-  // initCarrousel()
+    // Optional parameters
+    loop: true,
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+  });
+  $('#cover-image img, .project-image').click( function(event) {
+    const totalImg = $('img')
+    let indexImg = 0
+    for (let img of totalImg) {
+      if (event.target === img) { break }
+      indexImg++
+    }
+    swiper.slideToLoop(indexImg - 1)
+    $('body').css('overflow-y', 'hidden');
+    swiper.el.style.display = "block";
+    setTimeout(() => {
+      swiper.el.style.opacity = "1";
+    }, 10);
+  })
+  $('#close-carousel').click( () => {
+    $('body').css('overflow-y', 'auto');
+    swiper.el.style.opacity = "0";
+    setTimeout(() => {
+      swiper.el.style.display = "none";
+    }, 300);
+  })
   $('header').fadeOut()
   projectTitleIsScrolling = false
   checkTitleAutoScroll()
 
+
+
   let isProjectHeaderDisplayed = false
 
   $(window).scroll( () => {
@@ -822,55 +662,6 @@ function checkTitleAutoScroll() {
   }
 }
 
-// function initCarrousel() {
-//   let isCarrouselOpen = false, currentImg
-//   $('#reader img').each((i, el) => {
-//     $(el).on('click', () => {
-//       if (!isCarrouselOpen) { displayCarrousel(el) }
-//     })
-//   })
-//   $('#bg-carrousel').on('click', () => {
-//     hideCarrousel()
-//   })
-
-//   function displayCarrousel(img) {
-//     // if ($(img).attr('src') == $('#cover-image img').attr('src')) {
-//     //   $('#arrow-left .picto').addClass('disabled')
-//     // } else {
-//     //   $('#arrow-left .picto').removeClass('disabled')
-//     // }
-
-//     // if ($(img).attr('src') == $('#reader img').last().attr('src')) {
-//     //   $('#arrow-right .picto').addClass('disabled')
-//     // } else {
-//     //   $('#arrow-right .picto').removeClass('disabled')
-//     // }
-
-//     $('#reader #carrousel figure img').attr('src', $(img).attr('src'))
-
-//     currentImg = $(img)
-
-//     $('#arrow-left').on('click', () => {
-//       $('#reader #carrousel figure img').attr('src', $(currentImg).parent().prev().children().first().attr('src'))
-//       currentImg = $(currentImg).parent().prev().children().first()
-//     })
-
-//     $('#arrow-right').on('click', () => {
-//       $('#reader #carrousel figure img').attr('src', $(currentImg).parent().next().children().first().attr('src'))
-//       currentImg = $(currentImg).parent().next().children().first()
-//     })
-    
-//     $('#carrousel').css('display', 'block')
-//     isCarrouselOpen = true
-//   }
-  
-//   function hideCarrousel() {
-//     $('#carrousel').css('display', 'none')
-//     isCarrouselOpen = false
-//   }
-// }
-
-
 // show and hide footer
 function displayFooter() {
   $('footer').fadeIn()

user/themes/figureslibres-v2/scss/configuration/_variable.scss

@@ -45,7 +45,7 @@
   $titleFontSizeMobile: 1.8em;
   $bigFontSizeMobile: 2.2em;
 // typography - sizes desktop
-  $bigFontSizeDesktop: 3.8em;
+  $bigFontSizeDesktop: 2.9em;
 // typography - pictograms
   $pictoInlineWidth: 12px;
   $pictoInlineHeight: 10px;
@@ -57,7 +57,7 @@
   $pictoExtraLargeHeight: 54px;
 
 // colors - theme colors
-  $mainColor: #0b1117;
+  $mainColor: #0e1229;
   $mainColorSoft: #1f2429;
   $bgColor: #f5f5f5;
 // colors - gradient

user/themes/figureslibres-v2/scss/style.scss

@@ -193,24 +193,15 @@
           }
           #figureslibres {
             @include figures-libres-font;
-            canvas {
-              transform: translateX(calc(-100% + 10px)) translateY(-2px);
-            }
           }
           #publique {
             @include publique-font;
           }
           #sociale {
             @include sociale-font;
-            canvas {
-              transform: translateX(calc(-100% + 15px)) translateY(0px);
-            }
           }
           #culturelle {
             @include culturelle-font;
-            canvas {
-              transform: translateX(calc(-100% + 15px)) translateY(2px);
-            }
           }
           #logicielslibres {
             @include logiciels-libres-font;
@@ -274,9 +265,6 @@
           }
           #commanditaires {
             @include commanditaires-font;
-            canvas {
-              transform: translateX(calc(-100% + 10px)) translateY(0px);
-            }
           }
           #projets {
             @include projets-font;
@@ -296,7 +284,8 @@
         }
         #arrow-container {
           margin-top: $sectionSpacing;
-          @include transition-ease-out(transform 0.8s);
+          margin-bottom: 0vh;
+          @include transition-ease-out(transform 0.8s, margin-bottom 0.4s);
           .picto {
             width: $pictoLargeWidth;
             height: $pictoLargeHeight;
@@ -309,18 +298,13 @@
           overflow-y: hidden;
           height: auto;
           max-height: 0vh;
-          margin-top: 0px;
+          margin-top: 0vh;
           opacity: 0;
           @include transition-ease-out(opacity, 0.7s, max-height 1.2s, margin-top 1s);
         }
         a {
           text-decoration: none;
         }
-        canvas {
-          position: absolute;
-          transform: translateX(calc(-100% + 15px)) translateY(-2px);
-          @include transition-ease-out(width, height);
-        }
       }
       #projets-index {
         width: 100%;
@@ -549,58 +533,51 @@
             }
           }
         }
-        #carousel-container {
+        .swiper {
+          position: fixed;
+          top: 0;
+          left: 0;
+          height: 100vh;
+          width: 100vw;
+          background-color: rgba(255, 255, 255, 0.75);
+          backdrop-filter: blur(2px);
+          box-sizing: border-box;
+          z-index: 3;
           display: none;
+          opacity: 0;
+          transition: opacity 0.3s ease-out;
+          .swiper-wrapper {
+            z-index: 9;
+            display: flex;
+            align-items: center;
+            .swiper-slide {
+              height: 100%;
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              img {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: cover;
+              }
+            }
+          }
+          .swiper-button-next, .swiper-button-prev {
+            color: $mainColor;
+            padding: 2rem;
+            bottom: 5vh;
+            top: unset;
+          }
+          #close-carousel {
+            width: calc(#{$pictoSmallWidth} - 5px);
+            height: calc(#{$pictoSmallHeight} - 5px);
+            position: absolute;
+            top: 5vh;
+            right: 5vh;
+            z-index: 10;
+          }
         }
-        // #carrousel {
-        //   display: none;
-        //   #bg-carrousel {
-        //     position: fixed;
-        //     top: 0;
-        //     left: 0;
-        //     width: 100vw;
-        //     height: 100vh;
-        //     background-color: rgba(0, 0, 0, $transparency);
-        //     z-index: 3;
-        //     backdrop-filter: blur(2px);
-        //     cursor: pointer;
-        //   }
-        //   #slider {
-        //     position: fixed;
-        //     top: 25vh;
-        //     left: 0;
-        //     width: 100%;
-        //     height: 50vh;
-        //     background-color: $bgColor;
-        //     z-index: 4;
-        //     display: flex;
-        //     flex-direction: row;
-        //     justify-content: space-between;
-        //     div {
-        //       width: 15vw;
-        //       height: 100%;
-        //       display: flex;
-        //       justify-content: center;
-        //       align-items: center;
-        //       .picto {
-        //         width: $pictoSmallWidth;
-        //         height: $pictoSmallHeight;
-        //         cursor: pointer;
-        //       }
-        //       .disabled {
-        //         opacity: 0.5;
-        //         cursor: initial;
-        //       }
-        //     }
-        //     figure {
-        //       width: 100%;
-        //       img {
-        //         padding: 2vh 0 2vh 0;
-        //         object-fit: contain;
-        //       }
-        //     }
-        //   }
-        // }
       }
     }
     footer {
@@ -746,7 +723,7 @@
             width: auto;
             display: grid;
             grid-template-columns: 1fr 1fr;
-            grid-gap: 2% 4%;
+            grid-gap: 1em;
             figure {
               margin-top: 0;
               width: 100%;
@@ -775,6 +752,12 @@
               }
             }
           }
+          .swiper {
+            .swiper-button-next, .swiper-button-prev {
+              bottom: unset;
+              top: var(--swiper-navigation-top-offset,50%);
+            }
+          }
         }
       }
       footer {

user/themes/figureslibres-v2/templates/index.html.twig

@@ -3,10 +3,6 @@
 {% block content %}
     <div class="content" id="index-content" data-barba="container" data-barba-namespace="index">
 
-      <div id="loader-index">
-        <img src="{{ url('theme://images/loader/rolling.svg') }}" alt="loading animation" />
-      </div>
-
       <div id="main-p-index">
         {{ page.content|raw }}
       </div>

user/themes/figureslibres-v2/templates/partials/base.html.twig

@@ -16,17 +16,19 @@
 {% block stylesheets %}
     {% do assets.addCss('theme://css/theme.css', 95) %}
     {% do assets.addCss('theme://css/owl.carousel.min.css', 95) %}
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+    />
 {% endblock %}
 
 {% block javascripts %}
     {% do assets.addJs('jquery', 100) %}
     <script src="https://unpkg.com/@barba/core"></script>
-    <script src="https://unpkg.com/animate-css-grid@latest"></script>
     {% do assets.addJs('theme://js/libraries/lazy/jquery.lazy.min.js', 99) %}
-    {% do assets.addJs('theme://js/libraries/blotter/blotter.min.js', 98) %}
+    <script src="https://unpkg.com/animate-css-grid@1.4.3"></script>
-    {% do assets.addJs('theme://js/libraries/blotter/liquidDistortMaterial.js', 97) %}
     {% do assets.addJs('theme://js/libraries/gsap/gsap.min.js', 96) %}
-    {% do assets.addJs('theme://js/libraries/owl.carousel.min.js', 94) %}
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 {% endblock %}
 
 {% block assets deferred %}

user/themes/figureslibres-v2/templates/partials/carousel.html.twig

@@ -0,0 +1,12 @@
+<div class="swiper">
+    <div class="swiper-wrapper">
+        {% for image in page.media.images %}
+            <div class="swiper-slide">
+                <img class="lazy loader"  src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" />
+            </div>
+        {% endfor %}
+    </div>
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+    <div id="close-carousel" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div>
+</div>

user/themes/figureslibres-v2/templates/partials/carrousel.html.twig

@@ -1,24 +0,0 @@
-<div id="carousel-container">
-    <div class="owl-carousel owl-theme">
-        {# <div id="bg-carrousel">
-        </div>
-        <div id="slider">
-            <div id="arrow-left">
-                <div class="picto" data-src="{{ url('theme://images/pictos/arrow-left.svg') }}" aria-hidden="true"></div>
-            </div>
-            
-            <figure>
-
-                <img alt="{{ page.title }}" class="project-image">
-            </figure>
-
-            <div id="arrow-right">
-                <div class="picto" data-src="{{ url('theme://images/pictos/arrow-right.svg') }}" aria-hidden="true"></div>
-            </div>
-        </div> #}
-
-        {% for image in page.media.images %}
-            <img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
-        {% endfor %}
-    </div>
-</div>

user/themes/figureslibres-v2/templates/reader.html.twig

@@ -54,8 +54,8 @@
         {% block related_pages %}
           {% include 'partials/relatedpages.html.twig' %}
         {% endblock %}
-        {% block carrousel %}
+        {% block carousel %}
-          {% include 'partials/carrousel.html.twig' %}
+          {% include 'partials/carousel.html.twig' %}
         {% endblock %}
     </div>
 {% endblock %}