[Résolu] Aide pour modifier un code en JavaScript

bonjour a tous
j ai un soucis avec un simple script
qui permet de faire une transition avec 3 textes
comme sur ce t exemple

j ai tente de modifier le code pour en avoir 3 les uns a cote des autres
mais cela ne fonctionne pas
et n y connaissant rien
je recherche une âme charitable pour m aider merci
voici le code

https://codepen.io/branneman/pen/MejeVe

<section class="carrousel">

  <div class="slide active" style="background-image: url('https://www.klm.com/travel/nl_nl/images/8e25e9ed5db8f975241a921311911e8f_tcm541-654345.jpg')">
    <div class="textbox">
      <h1>St. Maarten</h1>
      <p>Bacon ipsum dolor amet t-bone venison filet mignon pork chop shoulder turducken bresaola brisket tongue landjaeger leberkas corned beef.</p>
    </div>
  </div>

  <div class="slide" style="background-image: url('https://www.klm.com/travel/nl_nl/images/c1939f830313c56ad1f4d897ce971b21_tcm541-670960.jpg')">
    <div class="textbox">
      <h2>China</h2>
      <p>Beef tongue landjaeger venison ham hock jerky bacon porchetta short ribs picanha ribeye pork chop t-bone kielbasa.</p>
    </div>
  </div>

  <div class="slide" style="background-image: url('https://www.klm.com/travel/nl_nl/images/ff48ebec1c92b635ab70abf99a6f58fb_tcm541-662158.jpg')">
    <div class="textbox">
      <h2>Surfing</h2>
      <p>Corned beef beef ribs porchetta, pork loin andouille venison bresaola filet mignon brisket pig. Pork turkey beef picanha. Strip steak shoulder sausage doner short ribs drumstick pork belly pork chop.</p>
    </div>
  </div>

</section>
<section class="carrousel">

  <div class="slide active" style="background-image: url('https://www.klm.com/travel/nl_nl/images/8e25e9ed5db8f975241a921311911e8f_tcm541-654345.jpg')">
    <div class="textbox">
      <h1>St. Maarten</h1>
      <p>Bacon ipsum dolor amet t-bone venison filet mignon pork chop shoulder turducken bresaola brisket tongue landjaeger leberkas corned beef.</p>
    </div>
  </div>

  <div class="slide" style="background-image: url('https://www.klm.com/travel/nl_nl/images/c1939f830313c56ad1f4d897ce971b21_tcm541-670960.jpg')">
    <div class="textbox">
      <h2>China</h2>
      <p>Beef tongue landjaeger venison ham hock jerky bacon porchetta short ribs picanha ribeye pork chop t-bone kielbasa.</p>
    </div>
  </div>

  <div class="slide" style="background-image: url('https://www.klm.com/travel/nl_nl/images/ff48ebec1c92b635ab70abf99a6f58fb_tcm541-662158.jpg')">
    <div class="textbox">
      <h2>Surfing</h2>
      <p>Corned beef beef ribs porchetta, pork loin andouille venison bresaola filet mignon brisket pig. Pork turkey beef picanha. Strip steak shoulder sausage doner short ribs drumstick pork belly pork chop.</p>
    </div>
  </div>

</section>

.carrousel {
  position: relative;
  max-width: 500px;
  height: 300px;
  @media screen and (max-width: 529px) {
    margin: 30px;
  }
  @media screen and (min-width: 530px) {
    margin: 30px auto;
  }

  .slide {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 15px;
    border-radius: 6px;
    background-size: cover;

    &.active {
      display: block;
    }

    .textbox {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 200px;
      padding: 7px 10px 0;
      border-radius: 4px;
      background: rgba(255, 255, 255, .75);
    }
    h1, h2 {
      font-size: 22px;
      margin: 0;
    }
    p {
      font-size: 15px;
      margin-top: 5px;
    }
  }
}

var intervalSpeed = 3000;
var animationSpeed = 500;
var $carrousel = $('.carrousel');
 
// Run animation forever
setInterval(nextSlide, intervalSpeed);

function nextSlide() {

  // Find the currently active slide
  var $activeSlide = $('.active', $carrousel);

  // Find the next slide (or the first)
  var $nextSlide = $activeSlide.next();
  if ($activeSlide.is(':last-child')) {
    $nextSlide = $('.slide', $carrousel).first();
  }

  // Animate active slide to hidden
  $activeSlide.fadeOut(animationSpeed);
  $activeSlide.removeClass('active');

  // Animate next slide to shown
  $nextSlide.fadeIn(animationSpeed);
  $nextSlide.addClass('active');

}

Et l'eau,

Je n'ai pas compris ce que tu essaies de faire. Ton code fonctionne. Peux tu être plus explicite dans ta demande

edit: Si je comprends bien ton souci : tu voudrais gérer dans le cas où il y aurait 2 carrousels ?
Modifié par niuxe (08 Jun 2021 - 19:08)

bonjour
merci pour la reponse
oui voila je voudrais avoir 3 carrousels sur la même ligne
celui ci fonctionne parfaitement mais il y en a qu un seul

var intervalSpeed = 1000,
    animationSpeed = 500,
    counter = [],
    setIntervalCarrousel = [] ;

$('.carrousel').each(function(i){
    var $slide = $('.slide', $(this));
  
    counter[i] = 0;
    setIntervalCarrousel[i] = setInterval(function(){
        $slide.eq(counter[i] % $slide.length).fadeOut(animationSpeed, function(){
            $slide.eq((counter[i] + 1) % $slide.length).fadeIn(animationSpeed);
        });

        counter[i] += 1;
    }, intervalSpeed);
});

variante :

var intervalSpeed = 1000,
    animationSpeed = 500,
    counter = [],
    setIntervalCarrousel = [],
    $carrousel = $('.carrousel');

$carrousel.each(function(i){
    var $slide = $('.slide', $(this));
  
    counter[i] = 0;
    setIntervalCarrousel[i] = setInterval(function(){
        $slide.eq(counter[i] % $slide.length).fadeOut(animationSpeed);
      $slide.eq((counter[i] + 1) % $slide.length).fadeIn(animationSpeed);
        counter[i] += 1;
    }, intervalSpeed);
});

codepen. Il y a un souci dans le css. après, je vais pas plus loin. À toi de faire le ménage.
Modifié par niuxe (08 Jun 2021 - 19:53)