Несколько ползунков изображений в HTML

Question

Пожалуйста, помогите.Этот div и скрипт работают только один раз.Я хочу разделить слайд-шоу один за другим, с разными изображениями.Но если я попытаюсь написать этот скрипт несколько раз, слайд-шоу не сработает.Я перепробовал все, что мог.Div и скрипт работают нормально, когда дело доходит до страницы с одним слайд-шоу с возрастом.

Answer 1

Я не уверен, что полностью понял вопрос, но, возможно, может пригодиться следующее?Немного упрощенный макет из оригинального, но того же содержимого - за исключением изменений, внесенных в атрибут style, который был неверным.

Если функция carousel принимает аргументы, вы можете вызывать ее много раз с разными аргументами -поскольку это был более поздний вызов, хотелось бы перезаписать предыдущий вызов функции.

<div>
  <img alt="kandy" src="kandy4.jpg" width='1000px' height='500px' class="kandy">
  <img alt="kandy" src="kandy.jpg" width='1000px' height='500px' class="kandy">
  <img alt="kandy" src="kandy2.jpg" width='1000px' height='500px' class="kandy">
  <img alt="kandy" src="kandy3.jpg" width='1000px' height='500px' class="kandy">
</div>
<div>
  <img alt="ella" src="ella4.jpg" width='1000px' height='500px' class="ella">
  <img alt="ella" src="ella.jpg" width='1000px' height='500px' class="ella">
  <img alt="ella" src="ella2.jpg" width='1000px' height='500px' class="ella">
  <img alt="ella" src="ella3.jpg" width='1000px' height='500px' class="ella">
</div>

<script>
    /* pass in whatever class as an argument */
    const carousel=function( _classname, _index, _time ){
        let col=document.getElementsByClassName( _classname );
        Array.prototype.slice.call( col ).forEach(function(e){
            e.style.display='none';
        });


        if( _index > col.length - 1 ) _index=0;
        col[ _index ].style.display='block';
        console.info( col[ _index ] );

        setTimeout( function(){
            carousel.call( this, _classname, _index, _time );
        },_time * 1000 );

        _index++;
    }

    carousel('kandy',0,3);
    carousel('ella',0,3);

</script>