Меню в виде адаптивной карусели

381

14 февраля 2017, 21:01

Вот так меню сверстал:

при сжатии окна браузера один пункт за другим пропадают и появляются стрелки, а так же присутствует счетчик вот как задумывалось:

Вот состояние если немного пролистать:

А вот состояние если до конца про листать:

Подскажите способ или лучше пример где что-то похожее есть, буду рад любой помощи и информации.

Answer 1

Это довольно просто можно реализовать с помощью owl Carousel 2.

Я написал пример, вам остается только настроить внешний вид:

$(".owl-carousel").owlCarousel({ 
  nav: true, 
  onChanged: owlchange, 
  onInitialized: owlchange, 
  responsiveClass: true, 
  //указываем количество меню на разных разрешениях 
  responsive: { 
    0: { 
      items: 4, 
      nav: true 
    }, 
    600: { 
      items: 6, 
      nav: true 
    }, 
    1000: { 
      items: 8, 
      nav: false //вырубаем навигацию, если не нужна 
 
    } 
  } 
}); 
 
function owlchange(event) { 
  //пересчитываем цифры и вписываем их в стрелки навигации 
  $('.owl-prev').text(event.item.index) 
  $('.owl-next').text(event.item.count - event.page.size - event.item.index) 
}

.owl-prev, 
.owl-next { 
  position: absolute; 
  background: #ccc; 
} 
.owl-prev { 
  left: 0; 
} 
.owl-next { 
  right: 0; 
} 
.owl-prev:before { 
  content: '<' 
} 
.owl-next:after { 
  content: '>' 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.js"></script> 
<div class="owl-carousel"> 
  <div>menu 1</div> 
  <div>menu 2</div> 
  <div>menu 3</div> 
  <div>menu 4</div> 
  <div>menu 5</div> 
  <div>menu 6</div> 
  <div>menu 7</div> 
  <div>menu 8</div> 
</div>