Glider.js seems to be ok for my needs, but it mess up with my carousel layout. Played with CSS but with no success. How to implement "Multiple Items" variant (https://nickpiscitelli.github.io/Glider.js/) but keep my own CSS? Now, after Glider implementation my image cards have no shadows, they are cropped, have different sizes etc. I just want to integrate Glider but keep my DIVs css layout (shadows, gaps, sizes, margins etc.)
My gallery code below.
<div class="gallery-container">
<div class="arrows">
<img src="icons/chevron-left.svg" alt="previous" class="leftchev">
<img src="icons/chevron-right.svg" alt="next" class="rightchev">
</div>
<div class="gallery-images">
<div class="image-container">
<img src="/img/photo1.jpg" alt="">
<div class="image-number-container">
<div class="number">34</div>
</div>
</div>
<div class="image-container">
<img src="/img/photo2.jpg" alt="">
<div class="image-number-container">
<div class="number">34</div>
</div>
</div>
<div class="image-container">
<img src="/img/photo3.jpg" alt="">
<div class="image-number-container">
<div class="number">34</div>
</div>
</div>
<div class="image-container">
<img src="/img/photo4.jpg" alt="">
<div class="image-number-container">
<div class="number">34</div>
</div>
</div>
<div class="image-container">
<img src="/img/photo5.jpg" alt="">
<div class="image-number-container">
<div class="number">34</div>
</div>
</div>
<div class="image-container">
<img src="/img/photo6.jpg" alt="">
<div class="image-number-container">
<div class="number">34</div>
</div>
</div>
</div>
<p class="galsmall-text">some text</p>
</div>