TOP Slider

// Add Shortcode
function custom_shortcode_slider( $atts ) {

	// Attributes
	$atts = shortcode_atts(
		array(
		),
		$atts
	);

	<style>
	  .carousel-item img {
	    width: 100%;
	  }
	  .banner {
	    width: 100%;
	  }
	</style>
	<?php 
	 $post_id = 263;
	 $slide_num = get_field("slide_num", $post_id);
	 $slides = [get_field("slide-1", $post_id), get_field("slide-2",$post_id) ,get_field("slide-3",$post_id)];
	 $slidesAlt = [get_field("slide-1-alt",$post_id), get_field("slide-2-alt",$post_id) ,get_field("slide-3-alt",$post_id)]; 
	 $slidesUrl = [get_field("slide-1-url",$post_id), get_field("slide-2-url",$post_id) ,get_field("slide-3-url",$post_id)]; 
	 
	 ?>
	
	<section class="banner">
	  <div
	    id="carouselExampleIndicators"
	    class="carousel slide"
	    data-ride="carousel"
	  >
	    <ol class="carousel-indicators" id="carousel">
	      <li
	        data-target="#carouselExampleIndicators"
	        data-slide-to="0"
	        class="active"
	      ></li>
	      <?php 
	        for ($i = 1; $i < $slide_num; $i++) { ?>
	      <li
	        data-target="#carouselExampleIndicators"
	        data-slide-to="<?php $i ?>"
	        class=""
	      ></li>
	      <?php } ?>
	    </ol>
	    <div class="carousel-inner">
	      <div class="carousel-item active">
	        <a href="<?php echo $slidesUrl[0];?>" target="_top" rel="noopener">
	          <img
	            src="<?php echo $slides[0];?>"
	            alt="<?php echo $slidesAlt[0]; ?>"
	          />
	        </a>
	      </div>
	      <?php 
	        for ($i = 1; $i < $slide_num; $i++) { ?>
	      <div class="carousel-item">
	        <a href="<?php echo $slidesUrl[$i];?>" target="_top" rel="noopener">
	          <img
	            src="<?php echo $slides[$i];?>"
	            alt="<?php echo $slidesAlt[$i]; ?>"
	          />
	        </a>
	      </div>
	      <?php } ?>
	    </div>
	
	    <a
	      class="carousel-control-prev"
	      href="#carouselExampleIndicators"
	      role="button"
	      data-slide="prev"
	    >
	      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	      <span class="sr-only">Previous</span>
	    </a>
	    <a
	      class="carousel-control-next"
	      href="#carouselExampleIndicators"
	      role="button"
	      data-slide="next"
	    >
	      <span class="carousel-control-next-icon" aria-hidden="true"></span>
	      <span class="sr-only">Next</span>
	    </a>
	  </div>
	</section>

}
add_shortcode( 'topSlider', 'custom_shortcode_slider' );