Cacher is the code snippet organizer for pro developers

/************************************************************************************
************************************************************************************/
/* parallasse carosello home */

.blocco-parallasse__carousel-container {
   position: absolute;
   transform: translateX(0) translateY(-50%);
   top: 50%;
   left: 0;
   z-index: 20;
   width: 100%;
}
.blocco-parallasse__carousel-container .cycle-slide{opacity:1 !important}

.blocco-parallasse__carousel img { padding: 0 60px;}
/* fine parallasse carosello */
/************************************************************************************
************************************************************************************/

//inizializzo cycle per il carousel #bloccoCarouselParallax01
//demo carousel: http://jquery.malsup.com/cycle2/demo/carousel.php
//plugin cycle2 per carousel: http://jquery.malsup.com/cycle2/download/#plugins

//punto al selettore del carousel con la var carosello
//in questo modo il codice è più corto, chiaro e mantenibile
var carosello = $('.blocco-parallasse__carousel');
var visibleSlides = 4;

//creo una funzione che inizializza il carousel in base  al caricamento della pagina e
function initcycle() {
   var width = $(window).width(); // recupero larghezza finestra

   //in base alla larghezza cambio il numero di elementi visibili
   if ( width < 768 )
      visibleSlides = 1;
   else if ( width > 768 && width < 980 )
      visibleSlides = 2;
   else
      visibleSlides = 4;

   //distruggo il carosello e ne setto uno nuovo
   carosello.cycle('destroy');

   //lancio la funzione che inizializza realmente il carosello
   setCycle(visibleSlides);
 }

//funzione di inzializzazione carosello
//visibleSlides -> numero di slide da visualizzare nel carousel
function setCycle(visibleSlides) {
   carosello.cycle({
      //effetto carousel
       'fx': 'carousel',
      //tempo su ciascuna slide
       'timeout':3000,
      //carosello di tipo fluido adatta il carousel alle dimensioni dello schermo
       'carouselFluid':true,
       //numero di slide visibili
       'carouselVisible': visibleSlides,
   });
 }

 //inizializzo il carousel al caricamento della pagina
 initcycle();

 //al ridimensionamento della pagina lancio initcycle
 var reinitTimer;
 $(window).resize(function() {
    //lancio la funzione dopo 200ms dall'evento (per evitare di consumare troppi cicli chiamando continuamente la funzione)
     clearTimeout(reinitTimer);
     reinitTimer = setTimeout(initcycle, 200); // Timeout limits the number of calculations
 });

<!-- BLOCCO PARALLASSE CAROSELLO #bloccoCarouselParallax01 -->
<div id="home-parallasse-carosello" class="container-fluid mv-big blocco-parallasse">
   <div class="blocco-parallasse__carousel-container">
      <div class="blocco-parallasse__carousel">
         <img src="resources/sample_img/c_01.png">
         <img src="resources/sample_img/c_02.png">
         <img src="resources/sample_img/c_03.png">
         <img src="resources/sample_img/c_04.png">
      </div>
   </div>
   <div class="img-holder" data-image="resources/sample_img/004.jpg"></div>
</div>
<!-- FINE BLOCCO PARALLASSE CAROSELLO -->