Creating carousel indicator in vue - vue.js

Question

I want to switch between two slides by using a scroll and I want to have an indicator
to show which of the two slides that are being shown.
Building the scroll part was not very difficult and has been done.
My problem is:
How can I extract the idx value from the for loop to know which one of the to slides that is being shown?
This so that I can present which slide I am on with the indicators.
Scrolling
This is the code for scrolling between the two images.
HTML
<div class="container_large">
<div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
<div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
Slide 1
</div>
<div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
Slide 2
</div>
</div>
</div>
CSS
.container_large{
width: 100%;
/* width: 90%; */
display: flex;
overflow-x: scroll;
margin-left: 0%;
height: 99px;
position: absolute;
margin-top: 27%;
z-index: 2;
}
.scroll{
min-width:388px;
position: relative;
margin-top: 0%;
border-radius: 8px;
display: flex;
height: 92px;
z-index: 1;
margin-left: 2%;
object-fit: cover;
}
Indicators
This code is for the indicators to show which of the two images that are being shown at the moment.
<div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
<div id="slide1" :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
<div id="slide2" :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
</div>
I would like to add v-if="idx==0" and v-if="idx==1" to id="slide1" and id="slide2" respectively to show which one of them that is being seen but
since they fall outside of the for loop this doesn't work.
Question
How can I catch the idx value or solve this in some other way to present which slide that I am on?

Answer 1

Ok so I think you have too much v-if inside your v-for.
There is no need to create all of your slides with to then only render one of them with series of conditions.
Have you considered something like this?
<div class="container_large">
<div
class="slide"
:style="slides[activeSlide].style">
{{slides[activeSlide].text}}
</div>
</div>