Views: Rewrite output or use a template ?

Hello,

I need to use a tailwind CSS carousel, and I wonder which way is better to do it.
Basically, I see 2 options. Rewrite the output of the view with the HTML markup ; or using a template to implement the same HTML markup.
This one is like this:

<div
	id="carouselExampleCaptions" class="relative" data-te-carousel-init data-te-carousel-slide>
	<!--Carousel indicators-->
	<div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
		<button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="0" data-te-carousel-active class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="1" class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-label="Slide 2"></button>
		<button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="2" class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-label="Slide 3"></button>
	</div>

	<!--Carousel items-->
	<div
		class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
		<!-- items -->
		<div class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item style="backface-visibility: hidden">
<a href={{ view.field.field_illus_administratif[key].entity.uri.value }}>

<img src={{ file_url(view.field.field_illus_administratif[key].entity.uri.value) }} class="block w-full" alt={{ view.field.field_illus_administratif[key].entity.alt }}/>


</a>



			<div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
				<h5 class="text-xl">First slide label</h5>
				<p>
					Some representative placeholder content for the first slide.
				</p>
			</div>
		</div>
		

	<!--Carousel controls - prev item-->
	<button class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none" type="button" data-te-target="#carouselExampleCaptions" data-te-slide="prev">
		<span class="inline-block h-8 w-8">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
				<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
			</svg>
		</span>
		<span class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
	</button>
	<!--Carousel controls - next item-->
	<button class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none" type="button" data-te-target="#carouselExampleCaptions" data-te-slide="next">
		<span class="inline-block h-8 w-8">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
				<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
			</svg>
		</span>
		<span class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
	</button>
</div>

In both cases I need to know how to implement navigation like TW does, and which is the right way to print the variable part (fields) . For the template option, which template type do I need to modifiy, actually I think about view's one, but not so specific because of the views-view-unformatted--caroussel-2023.html.twig.
The rewrite outpur option seem to me more simple, but less versatile.

Thanks for yours point of view.