How To Change Header Photo Whene Slide - php

Question

i use swiper slider to make a profile slide the javascript is standar like in this github
https://github.com/nolimits4web/Swiper/blob/master/demos/390-autoheight.html
this the picture from my page
i use like this for the header photo
<div class="row">
<div class="col-12 p-0">
<img class="kol1">
</div>
</div>
and this is for the text-box
<!--text-->
<div class="col-12 bg-text-kol">
<div class="swiper-container swiper2" >
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="text-left">
</br>
<h2 class="h5 mt-3"><?php echo $this->lang->line('kol_15_name'); ?></h2>
<?php echo '#'.$this->lang->line('kol_15_ig'); ?>
<p class="mark-bold"><?php echo $this->lang->line('kol_15_title'); ?></p>
<p class="mt-3"><?php echo $this->lang->line('kol_15_text'); ?></p>
</br>
</div>
</div>
</div>
<!-- Add Pagination-->
<div class="swiper-pagination"></div>
</div>
</div>
The slider text box is running well
my question is how do every time I do a slide photo header change every time I do a slide?

Answer 1

Here is a sample how you could integrate the image in your slider. The .text-left is positioned absolute inside the .testamonial container above all other content inside of it.
HTML Code:
<div class="swiper-slide">
<div class="testamonial">
<div class="banner">
Get your free Engrave
</div>
<div class="photo">
<img src="https://upload.wikimedia.org/wikipedia/en/8/88/MagooAndDog.jpg"/></div>
<div class="text-left">
<h2 class="h5 mt-3">Mr. Triples</h2>
#mr_triples
<p class="mark-bold">Content User</p>
<p class="mt-3">Not that much here.</p>
</div>
</div>
</div>
CSS Code:
.photo {
width: 300px;
height: 300px;
max-width: 300px;
overflow: hidden;
}
.banner {
background-color: orange;
padding: 5px;
}
.text-left {
text-align: left;
position: absolute;
width: 200px;
border-radius: 10px 10px 0px 0px;
background-color: rgba(255,255,255,0.8);
bottom: 0;
left: 30px;
padding: 10px;
padding-top: 20px;
min-height: 100px;
}
Here is a codepen to show you how your desired effect can be achieved.