W3Ask

Fai funzionare più slider con Blaze Slider

Come utilizzare più slider sulla stessa pagina Internet con il servizio gratuito Blaze Slider? Quando segui le istruzioni per installare uno slider con i file CSS e JavaScript che includi nel tuo sito web, funzionerà senza alcun problema. Tuttavia, quando proviamo a moltiplicare gli slider, funziona solo il primo, gli altri vengono visualizzati male. Quindi come si fa?

Non ci sono aiuti evidenti sul sito web ufficiale di Blaze Slider. Ci sono solo alcune indicazioni. E quando è stato pubblicato questo articolo, non c'è stato assolutamente alcun aiuto nemmeno sui siti dedicati all'assistenza reciproca tra sviluppatori di codici per il Web.

Ecco il codice che devi inserire dopo uno slider:

<!-- playground-->

    <script>

      const sliderEl = document.querySelector(".blaze-slider");



      const blazeSlider = new BlazeSlider(sliderEl, {

        all: {

          enableAutoplay: true,

          autoplayInterval: 15000,

          slidesToScroll: 6,

          slidesToShow: 6,

          transitionDuration: 300,

          loop: true

        },

        "(max-width: 900px)": {

          slidesToShow: 2,

          slidesToShow: 2,

          slidesGap: "40px"

        },

        "(max-width: 500px)": {

          slidesToShow: 1,

          slidesToScroll: 1

        }

      });



      // listen for slide event

      blazeSlider.onSlide(

        (pageIndex, firstVisibleSlideIndex, lastVisibleSlideIndex) => {

          console.log({

            pageIndex,

            firstVisibleSlideIndex,

            lastVisibleSlideIndex

          });

        }

      );

    </script>

Invece di mettere questo codice, dopo ogni blocco di righe di uno slider, bisogna cancellarlo. Dovrai invece inserire il codice seguente, proprio alla fine, cioè dopo l'ultimo cursore.

<!-- playground-->

    <script>

      const sliderEl = document.querySelectorAll(".blaze-slider").forEach(sliderEl => {



      const blazeSlider = new BlazeSlider(sliderEl, {

        all: {

          enableAutoplay: true,

          autoplayInterval: 15000,

          slidesToScroll: 6,

          slidesToShow: 6,

          transitionDuration: 300,

          loop: true

        },

        "(max-width: 900px)": {

          slidesToShow: 2,

          slidesToShow: 2,

          slidesGap: "40px"

        },

        "(max-width: 500px)": {

          slidesToShow: 1,

          slidesToScroll: 1

        }

      });



      // listen for slide event

      blazeSlider.onSlide(

        (pageIndex, firstVisibleSlideIndex, lastVisibleSlideIndex) => {

          console.log({

            pageIndex,

            firstVisibleSlideIndex,

            lastVisibleSlideIndex

          });

        }

      );



      })

    </script>

Fonte di ispirazione: https://blaze-slider.dev/docs/Tutorial/initialize-slider/

Post correlati:

La migliore alternativa a Slick Slider
https://it.w3ask.com/migliore-alternativa-slick-slider/

Slick Slider è da tempo il miglior codice javascript per creare slider di qualità, molto fluido, veloce e facile da creare. Con gli script ...

Messaggio di errore: Socket bind() to port 25 for address 127.0.0.1 failed
https://it.w3ask.com/messaggio-errore-socket-bind-port-25-address-127-0-0-1-failed/

È possibile che venga visualizzato un messaggio di errore indicante che l'associazione socket con la porta 25 per l'indirizzo locale non è ...

Perché Sendmail continua a funzionare sul server Debian?
https://it.w3ask.com/perche-sendmail-continua-funzionare-server-debian/

Di recente hai interrotto il servizio Sendmail che ti consente di inviare e-mail dal tuo server web. Vuoi disabilitarlo perché ci sono conflitti ...

Fail2Ban non funziona
https://it.w3ask.com/fail2ban-non-funziona/

Fail2Ban può essere un modulo molto utile per un server se vuoi proteggerlo da attacchi esterni come DDOS o hacker che vogliono rubare i tuoi ...

Come installare Fail2Ban
https://it.w3ask.com/installare-fail2ban/

Fail2Ban può essere un buon modo per combattere robot spam, hacker, attacchi DDoS. Questo modulo è una buona aggiunta per la protezione del ...