Создание списка меню с кнопками «Вперед» и «Назад», например, «Карусель»

Question

Я пытаюсь сделать карусель, но у меня возникают проблемы.

Сначала, когда вы продолжаете нажимать кнопку Next, функция продолжает работать там, где она должна быть остановлена, если последний элемент достиг. Я понятия не имею, как я могу сказать, чтобы функция перестала работать. Мне удалось сделать это с помощью кнопки prev.

Во-вторых, мне нужно, чтобы она была гибкой, потому что я не знаю ни ширины, ни количества предметов. Например, если есть только два элемента, кнопка Next и Prev больше не нужна, я хочу, чтобы она скрывалась или что-то вроде того, если элементы больше не помещаются в контейнер, тогда отображается Next или * 1010. * кнопка.

$(document).ready(function() {
  var margin_left = 0;
  $('#prev').on('click', function(e) {
    e.preventDefault();
    if (margin_left != 0) {
      margin_left = margin_left + 190;
      $('ul#csx-chips-menu-slider').animate({
        'margin-left': margin_left
      }, 300);
    }
  });

  $('#next').on('click', function(e) {
    e.preventDefault();
    margin_left = margin_left - 190;
    $('ul#csx-chips-menu-slider').animate({
      'margin-left': margin_left
    }, 300);
  });
});

* {
  box-sizing: border-box;
}

.chips-slider-container {
  border: solid 1px;
  width: 100%;
  padding: 2px;
}

.chips-slider-parent {
  width: 100%;
  display: flex;
  border: solid 1px;
}

.chips-slider-parent .csx-chips-items {
  background-color: #CCCCCC;
  padding: 5px;
}

.chips-slider-parent .csx-chips-items:nth-child(2) {
  background-color: #DDDDDD;
  flex: 1;
  display: block;
  overflow-x: hidden;
}

.csx-chips-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.csx-chips-menu li {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px;
}

.csx-chips-sub-menu {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  padding: 0;
  margin: 0;
  margin-left: -11px;
  list-style: none;
}

.csx-chips-sub-menu li {
  display: block;
}

.csx-chips-menu li:hover>.csx-chips-sub-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chips-slider-container">
  <div class="chips-slider-parent">
    <div class="csx-chips-items">
      <a href="#" id="prev">PREV</a>
    </div>
    <div class="csx-chips-items">
      <ul class="csx-chips-menu" id="csx-chips-menu-slider">
        <li>
          <a href="#">Sample Menu 1</a>
          <ul class="csx-chips-sub-menu">
            <li><a href="#">Sample Sub Menu</a></li>
            <li><a href="#">Sample Sub Menu</a></li>
            <li><a href="#">Sample Sub Menu</a></li>
            <li><a href="#">Sample Sub Menu</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Menu 2</a></li>
        <li><a href="#">Sample Menu 3</a></li>
        <li><a href="#">Sample Menu 4</a></li>
        <li><a href="#">Sample Menu 5</a></li>
        <li><a href="#">Sample Menu 6</a></li>
        <li><a href="#">Sample Menu 7</a></li>
        <li><a href="#">Sample Menu 8</a></li>
        <li><a href="#">Sample Menu 9</a></li>
        <li><a href="#">Sample Menu 10</a></li>
        <li><a href="#">Sample Menu 11</a></li>
      </ul>
    </div>
    <div class="csx-chips-items">
      <a href="#" id="next">NEXT</a>
    </div>
  </div>
</div>

Answer 1

Это может помочь вам определить проблему, которую вы получили с помощью кнопки Далее.

$(document).ready(function(){
    $('#btn-nav-previous').click(function(){
        $(".menu-inner-box").animate({scrollLeft: "-=100px"});
    });
    
    $('#btn-nav-next').click(function(){
        $(".menu-inner-box").animate({scrollLeft: "+=100px"});
    });
});

nav#menu-container {
    background:#586e75;
    position:relative;
    width:100%;
    height: 56px;
}
#btn-nav-previous {
    text-align: center;
    color: white;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    left: 0px;
    padding: 9px 12px;
    background: #8f9a9d;
    fill:#FFF;
}
#btn-nav-next {
    text-align: center;
    color: white;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    right: 0px;
    padding: 9px 12px;
    background: #8f9a9d;
    fill:#FFF;
}
.menu-inner-box
{ 
    width: 100%;
    white-space: nowrap;
    margin: 0 auto;
    overflow: hidden;
    padding: 0px 54px;
    box-sizing: border-box;
}
.menu
{  
    padding:0;
    margin: 0;
    list-style-type: none;
    display:block;
    text-align: center;
}
.menu-item
{
    height:100%;
    padding: 0px 25px;
    color:#fff;
    display:inline;
    margin:0 auto;
    line-height:57px;
    text-decoration:none;
    text-align:center;
    white-space:no-wrap;
}
.menu-item:hover {
    text-decoration:underline;
}
.last-item{
  margin-right: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu-container" class="arrow">
  <div id="btn-nav-previous" style="fill: #FFF">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
            viewBox="0 0 24 24">
      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  </div>
  <div id="btn-nav-next">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
            viewBox="0 0 24 24">
      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  </div>
  <div class="menu-inner-box">
    <div class="menu">
      <a class="menu-item" href="#">Menu 1</a>
      <a class="menu-item" href="#">Menu 2</a>
      <a class="menu-item" href="#">Menu 3</a>
      <a class="menu-item" href="#">Menu 4</a>
      <a class="menu-item" href="#">Menu 5</a>
      <a class="menu-item" href="#">Menu 6</a>
      <a class="menu-item" href="#">Menu 7</a>
      <a class="menu-item" href="#">Menu 8</a>
      <a class="menu-item" href="#">Menu 9</a>
      <a class="menu-item" href="#">Menu 10</a>
      <a class="menu-item last-item" href="#">Menu 11</a>
    </div>
  </div>
</nav>

Обратите внимание, что я добавил маржу к классу last item.

Кредит Phppot . РЕДАКТИРОВАТЬ: Если вы не можете добавить класс к последнему элементу для добавления поля к нему, вы можете использовать следующие селекторы.

:last-of-type
:last-child

например,

.two:last-of-type{
    color:red;
}
ul :last-child {
    color:green;
}
/*These match nothing:*/
.one:last-of-type {
    color:pink;
    /*.. because li.one is not the last <li>*/
}
.one:last-child {
    color: pink;
    /*.. because li.one is not the last child*/
}

<ul class="test">
    <li class="one">1</li>
    <li class="one">2</li>
    <li class="one">3</li>
    <li class="two">4</li>
    <li class="two">This is the last LI type</li>
    <dt>This is the last child</dt>
</ul>

Answer 2

Вот как я обычно это делаю:

Получите максимальное отрицательное поле, вычтя ширину ползунка из родительской ширины в функции getMaxMargin(). Разница заключается в максимальном смещении, которое вы можете добавить к ползунку.

Затем просто используйте Math.max, чтобы всегда оставаться выше этого предела. А для другого конца - чтобы не go выше 0 - используйте Math.min. Итак, все маги c - это строка: margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ))

$(document).ready(function() {

  var margin_left = 0;

  $('#prev').on('click', function(e) {
    e.preventDefault();
    animateMargin( 190 );
  });

  $('#next').on('click', function(e) {
    e.preventDefault();
    animateMargin( -190 );
  });

  const animateMargin = ( amount ) => {
      margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ));
      $('ul#csx-chips-menu-slider').animate({
        'margin-left': margin_left
      }, 300);
};

  const getMaxMargin = () => 
    $('#csx-chips-menu-slider').parent().width() - $('#csx-chips-menu-slider')[0].scrollWidth;
});