slider_full_code

slider_full_code.php

<?php
add_shortcode( 'wp_doin_slider', 'wp_doin_slider_func' );

/**
 * @hook wp_doin_slider_func
 */
function wp_doin_slider_func( $atts, $content = null ) {
  ?>
  <script type="text/javascript">
		document.addEventListener('DOMContentLoaded', function() {
      
		// Get all elements with slide classname
		const slides = document.querySelectorAll('.slide');

		let currentIndex = 1;

		function toggleActiveClass() {
			// Remove 'active' class from all sliders
			slides.forEach(slide => {
				slide.classList.remove('active');
			});

			// Add 'active' class to the current slider
			slides[currentIndex].classList.add('active');

			// Increment index to point to the next slider
			currentIndex = (currentIndex + 1) % slides.length;
		}

		// Initial call to set the first slider active
		toggleActiveClass();

		// Set interval to toggle the active class every 1500 milliseconds
		setInterval(toggleActiveClass, 1500);
		});
	</script>
	
	<style type="text/css">
		.slider__wpdoin {
			position: relative;
			width: 100%;
			min-height: 171px;
			margin: 25px 0;
		}

		.slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			transition: all .2s ease-in-out;
			opacity: 0;
		}	

		.slide.active {
			opacity: 1;
		}
	</style>
  <?php	
  $atts = shortcode_atts(
	  array(
		'ids' => '1,2,3,4',
		), $atts, 'bartag' );
	
	$image_ids = explode( ',', $atts['ids'] );
	
	if( !empty( $image_ids ) ):
         ob_start();
		?>
		<div class="slider__wpdoin">
		    <?php 
			  $counter = 1;
			  foreach( $image_ids as $id ): 
			?>	
				<div class="slide slide--<?php echo $counter; ?> <?php if( $counter == 1 ): ?>active<?php endif; ?>">
						<?php echo wp_get_attachment_image( $id, 'medium' ); ?>
				</div>
			<?php 
				$counter++;
				endforeach; 
			?>
		</div>
		<?php
	endif;
  return ob_get_clean();
}