Сергей Ракипов, так должно быть?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>
<style>
img {max-height: 100px}
.slider {position: relative}
.flex-control-nav {bottom: 0}
</style>
<script>
$(() => {
$('.slider').each((i, node) => {
$(node).find('.flexslider').flexslider({
animation: "slide",
controlsContainer: $(node).find(".custom-controls-container"),
customDirectionNav: $(node).find(".custom-navigation a"),
})
});
});
</script>
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="image1.jpg" alt="img-1" />
</li>
<li>
<img src="image2.jpg" alt="img-2" />
</li>
<li>
<img src="image3.jpg" alt="img-3" />
</li>
<li>
<img src="image4.jpg" alt="img-4" />
</li>
</ul>
</div>
<div class="custom-navigation">
<a href="#" class="flex-prev">Prev</a>
<div class="custom-controls-container"></div>
<a href="#" class="flex-next">Next</a>
</div>
</div>
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<p>Text 1</p>
</li>
<li>
<p>Text 2</p>
</li>
<li>
<p>Text 3</p>
</li>
<li>
<p>Text 4</p>
</li>
</ul>
</div>
<div class="custom-navigation">
<a href="#" class="flex-prev">Prev</a>
<div class="custom-controls-container"></div>
<a href="#" class="flex-next">Next</a>
</div>
</div>