CODEWITHSUNDEEP
javascripthtmlcsscarousel
Michel
Michel

Reputation: 41

multiple carousel not working on the page and buttons breaking the carousel (embla)

I have a problem with js. I created a couple of carousel on my page and I'm using Embla library to run them. first carousel works but the second one on the page does not. I'm guessing I have to address the second carousel container but it's already using the same class.

here's the codepen to play with it.

<body>
 <section class="small">
  <h2>Le Nostre Camere</h2>
   <div class="intro">
    <p>La struttura è dotata di tre camere matrimoniali / doppie, ognuna con bagno privato e  dotate di aria condizionata ed ampie finestre che si affacciano sulla campagna circostante.</p>
   </div>
   <div class="embla">
     <ul class="lista embla__container">
        <li class="lista_item embla__slide">
           <div class="thumb">
             <a href="<?php the_permalink(); ?>"><img src"" alt=""></a>
            </div>
            <div class="tex">
              <a href="<?php the_permalink(); ?>"><h3>Camera Matrimoniale</h3></a>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
            <a href="<?php the_permalink(); ?>" class="button button-left">Scopri di più</a>
         </li>
         <li class="lista_item embla__slide">
           <div class="thumb">
             <a href="<?php the_permalink(); ?>"><img src"" alt=""></a>
            </div>
            <div class="tex">
              <a href="<?php the_permalink(); ?>"><h3>Camera Matrimoniale</h3></a>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
            <a href="<?php the_permalink(); ?>" class="button button-left">Scopri di più</a>
         </li>
            </ul>
        
        
    </div>
<section class="small">
 <h2>Attività</h2>
 <div class="intro">
    <p>
      Scopri alcune delle attività che offre la nostra zona.
      Dai musei alle crociere sul Po, dalle chiese ai borghi pieni di storia e molto altro ancora!</p>
</div>
<div class="embla">
    <ul class="lista embla__container">
     <li class="lista_item embla__slider">
            <div class="thumb">
                <img src="<?php    echo $mypod->display( 'immagine' ); ?>" alt="">
            </div>
            <div class="tex">
              <h3>Museo del Po e della navigazione interna</h3>
              <p>Esposizione d’imbarcazioni fluviali e materiali per la navigazione sul Fiume Po.</p>
            </div>
            <a href="<?php    echo $mypod->display( 'sito_internet' ); ?>" class="button button-left">Scopri di più</a>
         </li>
       <li class="lista_item embla__slider">
            <div class="thumb">
                <img src="<?php    echo $mypod->display( 'immagine' ); ?>" alt="">
            </div>
            <div class="tex">
              <h3>Casa Museo Belvedere – Pietro Ghizzardi</h3>
              <p>Raccolta delle opere del pittore e scrittore  Pietro Ghizzardi (1906-1986).</p>
            </div>
            <a href="<?php    echo $mypod->display( 'sito_internet' ); ?>" class="button button-left">Scopri di più</a>
            
            
       </li>
       <li class="lista_item embla__slider">
            <div class="thumb">
                <img src="<?php    echo $mypod->display( 'immagine' ); ?>" alt="">
            </div>
            <div class="tex">
              <h3>Itinerari e crociere sul fiume Po</h3>
              <p>La motonave “Padus” accompagna i turisti sul tratto reggiano del grande fiume.</p>
            </div>
            <a href="<?php    echo $mypod->display( 'sito_internet' ); ?>" class="button button-left">Scopri di più</a>
            
            
        </li>
       
    </ul>
</div>

    </section>
</body>

and js

    // script per carousel con EMBLA
   var emblaNode = document.querySelector('.embla')
   var options = { loop: true }
   var plugins = [EmblaCarouselAutoplay()] // Plugins

   var embla = EmblaCarousel(emblaNode, options, plugins)

Second question is how to make the buttons (prev/next) work. I tried to follow the documentation but again I must have messed up in js. second codepen with example including the buttons (right one is to the right of the page instead of the container??)

<body>
 <section class="small">
  <h2>Le Nostre Camere</h2>
  <div class="intro">
   <p>La struttura è dotata di tre camere matrimoniali / doppie, ognuna con bagno privato e  dotate di aria condizionata ed ampie finestre che si affacciano sulla campagna circostante.</p>
  </div>
 <div class="embla">
  <div class"embla__viewport">
   <ul class="lista embla__container">
    <li class="lista_item embla__slide">
       <div class="thumb">
         <a href="<?php the_permalink(); ?>"><img src"" alt=""></a>
        </div>
        <div class="tex">
          <a href="<?php the_permalink(); ?>"><h3>Camera Matrimoniale</h3></a>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <a href="<?php the_permalink(); ?>" class="button button-left">Scopri di più</a>
     </li>
     <li class="lista_item embla__slide">
       <div class="thumb">
         <a href="<?php the_permalink(); ?>"><img src"" alt=""></a>
        </div>
        <div class="tex">
          <a href="<?php the_permalink(); ?>"><h3>Camera Matrimoniale</h3></a>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <a href="<?php the_permalink(); ?>" class="button button-left">Scopri di più</a>
     </li>
    </ul>
 </div>
 <button class="embla__button embla__button--prev" type="button">
    <svg
      class="embla__button__svg"
      viewBox="137.718 -1.001 366.563 643.999"
    >
      <path
        d="M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z"
      ></path>
    </svg>
  </button>
  <button class="embla__button embla__button--next" type="button">
    <svg class="embla__button__svg" viewBox="0 0 238.003 238.003">
      <path
        d="M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"
      ></path>
    </svg>
  </button>
 </div>
</body>

and js

 // script per carousel con EMBLA

 var options = { loop: true }
 var plugins = [EmblaCarouselAutoplay()] // Plugins

 var embla = EmblaCarousel(emblaNode, options, plugins)

 import EmblaCarousel from 'embla-carousel'

 // Grab wrapper nodes
 const rootNode = document.querySelector('.embla')
 const viewportNode = rootNode.querySelector('.embla__viewport')

 // Grab button nodes
 const prevButtonNode = rootNode.querySelector('.embla__prev')
 const nextButtonNode = rootNode.querySelector('.embla__next')

 // Initialize the carousel
 const embla = EmblaCarousel(viewportNode)

 // Add click listeners
  prevButtonNode.addEventListener('click', embla.scrollPrev, false)nextButtonNode.addEventListener('click', embla.scrollNext, false)
</div>

Upvotes: 2

Views: 1920

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17240

You'll need to select all carousel instances with

let emblaNodes = document.querySelectorAll(".embla")

Otherwise you would just select the first instance.

Then you'll loop through all instances and init each like so

emblaNodes.forEach(function (emblaNode, i) {
  let options = { loop: true };
  let embla = EmblaCarousel(emblaNode, options);
}

example

let emblaNodes = document.querySelectorAll(".embla");

emblaNodes.forEach(function (emblaNode, i) {
  let options = { loop: true };
  let embla = EmblaCarousel(emblaNode, options);

  //nav
  let prevBtn = emblaNode.querySelector(".embla__prev");
  let nextBtn = emblaNode.querySelector(".embla__next");

  // init nav
  let setupPrevNextBtns = (prevBtn, nextBtn, embla) => {
    prevBtn.addEventListener("click", embla.scrollPrev, false);
    nextBtn.addEventListener("click", embla.scrollNext, false);
  };
  setupPrevNextBtns(prevBtn, nextBtn, embla);
  
});
.embla {
  overflow: hidden;
  width:600px;
  height:200px;
  position:relative;
}
.embla__container {
  display: flex;
}
.embla__slide {
  position: relative;
  flex: 0;
}
.empla-nav{
  position:absolute;
  z-index:top;
  top:45%;
  bottom:0;
  height:100%;
  width:100%;
}

.btn-nav{
    position:absolute;
}
.embla__next{
  right:0;
}
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>

<div class="embla">
  <div class="embla__container">
    <div class="embla__slide"><img src="https://placekitten.com/g/600/200"></div>
    <div class="embla__slide"><img src="https://placekitten.com/g/600/200"></div>
    <div class="embla__slide"><img src="https://placekitten.com/g/600/200"></div>
  </div>
  <div class="empla-nav">
    <button class="btn-nav embla__prev">&laquo;</button>
    <button class="btn-nav embla__next">&raquo;</button>
  </div>
</div>
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide"><img src="https://placekitten.com/g/600/200"></div>
    <div class="embla__slide"><img src="https://placekitten.com/g/600/200"></div>
    <div class="embla__slide"><img src="https://placekitten.com/g/600/200"></div>
  </div>
  <div class="empla-nav">
    <button class="btn-nav embla__prev">&laquo;</button>
    <button class="btn-nav embla__next">&raquo;</button>
  </div>
</div>

Upvotes: 2

Related Questions