Как я могу сделать разрыв между одним скользящим меню

Question

каждый, мне нужна помощь

У меня есть скользящее меню с 2 кнопками со стрелками.когда я наведу курсор на кнопку, меню должно скользить влево или вправо.но мне нужно разрыв 100px в этом меню.Пример: у меня есть пункт меню бесконечности. В моей карусели меню я показываю только 8 это примерно так ...

[ITEM_01] [ITEM_02] [ITEM_03] [ITEM_04] --- gap-100px --- [ITEM_05] [ITEM_06] [ITEM_07] [ITEM_08]

при наведении курсора на стрелку вправо, она должна начать скользить следующим образом ... пожалуйста см. Позицию по пункту 4и пункт 5 в обоих случаях ...

[ITEM_02] [ITEM_03] [ITEM_04] [ITEM_05] --- gap-100px --- [ITEM_06] [ITEM_07] [ITEM_08] [ITEM_09]

Я сделал скользящую карусель для меню, но я не могу сделать разрыв между слайдами.

Мой HTML-код:

<section class="wedding-menu-left-outer">
<i class="fas fa-angle-left float-left left-arrow"></i>
    <section class="wedding-menu-left-inner">
        <ul class="main-menu-left first-menu">
            <li><a href="#">first 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
            <li><a href="#">item 8</a></li>
            <li><a href="#">item 9</a></li>
        </ul>
    </section>
<i class="fas fa-angle-right float-right right-arrow"></i>

Мой CSS-КОД:

ul.main-menu-left {
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
    float: left;
    white-space: nowrap;
    overflow: hidden;}
ul.main-menu-left li {
    display: inline-block;
    position: relative;
    background-image: 
    url(../../img/tabs/brqx_tabs_no_selected_war_0100_2017.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px;}
ul.main-menu-left li a {
    display: inline-block;
    color: #000;
    text-transform: uppercase;
    padding: 12px 12px;
    font-size: .75rem;
    text-decoration: none;}
    section.wedding-menu-left-wrapper {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;}
.wedding-menu-left-outer{
    position: relative;
    width: 100%;}
section.wedding-menu-left-inner {
    float: left;}
.wedding-menu-left-outer i {
    font-size: 25px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;}

Мой JQUERY-КОД:

function makeid() {
var text = ""; var possible="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
let scrollSpeed = 10;
function horizontal_Menu_Width(){
$('.wedding-menu-left-outer').each(function(){
    let id = makeid();
    $(this).attr("id", id);
    //total width of horizontal menu with 2 arrow.
    let horizontalMenuWidth = $(this).width();
    // width of the arrow
    let horizontalMenuArrowWidth = $(this).children('i').outerWidth(true);
    // total-width - 2 arrow-width = menu-container width;
    let mainContainerWidth = horizontalMenuWidth - (horizontalMenuArrowWidth*2);
    $(this).children('.wedding-menu-left-inner').css('width', mainContainerWidth);  
});
}

horizontal_Menu_Width();

$('.wedding-menu-left-outer > i').on('mouseenter', function(){
// init class,ID on valiable when mouse inter
let horizontalMenuParentID = $(this).parent('.wedding-menu-left-outer')[0].id;
let leftArrow = $(this).hasClass('left-arrow');
let rightArrow = $(this).hasClass('right-arrow');
// need to find total width of "menu-inner-container" class
let horizontalMenuScrollableWidth = $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left")[0].scrollWidth;
//need to find out visible width of "menu-inner-container" class
let menuInnerContainerWidth = $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").width();
//this is the value of total scrolable area of horizontal menu
let horizontalMenuScroll = horizontalMenuScrollableWidth - menuInnerContainerWidth;
//now we need to make a scroll left of "total scrolable area"
let scrollableMenu = horizontalMenuScroll - $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").scrollLeft();

// when mouse inter in right-arrow
if(rightArrow){
    $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").animate({
        scrollLeft: horizontalMenuScroll
    },scrollSpeed*scrollableMenu);
} else if(leftArrow){
    $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").animate({
        scrollLeft: 0
    },scrollSpeed * $("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").scrollLeft());
}
});

$('.wedding-menu-left-outer > i').on('mouseleave', function(){
let horizontalMenuParentID = $(this).parent('.wedding-menu-left-outer')[0].id;
$("#"+horizontalMenuParentID+" >.wedding-menu-left-inner>.main-menu-left").stop();
});

Я хочу получить результат, подобный этому изображению .....

но я уже сделал это как это изображение ...

Answer 1

Я бы посоветовал вам использовать Css nth selector, если вы уверены, что число элементов тега число li будет только 8.Я просто добавил к вам элемент li, пример которого показан в codePen.

    .liTag:nth-child(4){ 
          margin-right:100px; 
      }

      .liTag:nth-child(5){ 
       margin-left: 100px; 
     }

Рабочая демонстрация показана ниже https://codepen.io/sujilnt/full/QYwRNm

Answer 2

Добавьте эту CSS и попробуйте.

.wedding-menu-left-outer li:nth-child(4n){
    margin-right:40px;
 }

Скриптовая ссылка