Придумать решение для индикаторов в карусели (центрировать активную и 2 по бокам, лишние убрать)
Есть карусель слайдов с точками-индикаторами, заказчик просит убрать огромное количество этих точек, оставить одну активную и две соседних по бокам (с возможностью переключаться). Чтобы они перескакивали также, как карусель, но лишние скрыть. Активная по центру. Ума пока не приложу как это реализовать, нигде не встречала подобных фич. Карусель на materialize. Код, скрин и ссылка на страницу с каруселью ниже.
$(document).ready(function(){
$('.carousel').carousel({
numVisible: 3,
dist: -150,
indicators: true,
shift: 100
});
});
// move next carousel
$('.moveNextCarousel').click(function(e){
e.preventDefault();
e.stopPropagation();
$('.carousel').carousel('next');
});
// move prev carousel
$('.movePrevCarousel').click(function(e){
e.preventDefault();
e.stopPropagation();
$('.carousel').carousel('prev');
}); <div class="carousel carousel-catalog">
<a class="carousel-item" href="#">
<p>WAVE</p>
<img src="img/icons/wave.png" alt="">
</a>
<a class="carousel-item" href="#">
<p>COSMOPOLITAN</p>
<img src="img/icons/cosmo.png" alt="">
</a>
<a class="carousel-item" href="#">
<p>SMOOV</p><img src="img/icons/smoov.png" alt="">
</a>
</div>