добавить процентное значение вместо пикселей

Question

Я хочу создать (что-то вроде) ползунок полной ширины, где у меня есть гибкая оболочка с несколькими дочерними секциями. каждая секция по 100vw расположена в ряд. теперь я хочу перемещать flex-wrapper с полем влево 100% каждый раз, когда вы нажимаете кнопку. он не должен добавлять его один раз, он должен складываться как 100%, щелчок, 200%, щелчок, 300% и так далее ...

Я придумал следующее.

$(document).ready(function() {
    $('.button').click(function() {
        $('.section-wrapper').css('margin-left', '+=100%');
    });
});

похоже, не работает. когда я заменяю 100% на 1920 пикселей, он работает как задумано. (на моем мониторе fullhd)

какие-нибудь идеи?

РЕДАКТИРОВАТЬ: вот мой код, надеюсь, теперь он прояснится: https://codepen.io/tuxedo/pen/gOazMxv

Answer 1

Возможно, это то, что вы ищете.

$(document).ready(function() {
    $('.button').click(function() {
        var e = document.getElementsByClassName("section-wrapper");
        var marLeft = getStyle(e, 'margin-left');
        var final_width = marLeft + 100;
            final_width = final_width+"%";
        $('.section-wrapper').css('margin-left',final_width);
    });
});

или другим способом:

var width_value = 0;

$(document).ready(function() {
    $('.button').click(function() {
        width_value += 100;
        $('.section-wrapper').css('margin-left',width_value+"%");
    });
});

Answer 2

Что вам нужно знать

• идентификатор должен быть уникальным .. не используйте один и тот же идентификатор для более чем одного элемента (id="section") должно быть class="section otherClasses"
• Когда вы работаете с display : flex;, используйте min-width , max-width , min-height , max-height
• используйте flex-direction: column;
• Не нужно использовать justify or align or flex для обертки, это заставит обертку прилипать средняя часть

$(document).ready(function() {
  var slide_number = 1;
  $('.button').click(function() {
    var sections_num = $('.section-wrapper > .section').length; // get number of sections inside the wrapper
    $('.section-wrapper > .section:eq(0)').animate({'margin-left' :  -slide_number * 100+'vw'} , 1000);
    slide_number = slide_number == sections_num - 1 ? 0 : slide_number + 1; // increase slide_number by 1 if the slide_number is less then the sections_num if there are the same return to the first section
  });
});

body {
  margin: 0;
  background: #222222;
}

#main {
  display: flex;
  /*flex-flow: row nowrap;*/
  width : 100vw;
  min-width: 100vw;
  max-width : 100vw;
  height : 100vh;
  min-height: 100vh;
  max-height: 100vh;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  flex-direction: column;
  -ms-flex-direction : column;
  -webkit-flex-direction : column;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width : 100vw;
  min-width: 100vw;
  max-width : 100vw;
  height : 100vh;
  min-height: 100vh;
  max-height: 100vh;
}

.section-wrapper {
  display: flex;
  width : 100vw;
  min-width: 100vw;
  max-width : 100vw;
  height : 100vh;
  min-height: 100vh;
  max-height: 100vh
}

/* .section-wrapper.scroll {
  transform: translateX(-100vw);
} */

.button {
  width: 100px;
  height: 20px;
  background: cadetblue;
  cursor: pointer;
}

.bisque {
  background: bisque;
}

.aliceblue {
  background: aliceblue;
}

.aquamarine {
  background: aquamarine;
  background: linear-gradient(90deg, aquamarine 0%, aliceblue 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div class="section-wrapper">
    <div class="section aquamarine">
      <div class="button">
        <p>button 1</p>
      </div>
    </div>
    <div class="section aliceblue">
      <div class="button">
        <p>button 2</p>
      </div>
    </div>
    <div class="section bisque">
      <div class="button">
        <p>button 3</p>
      </div>
    </div>
  </div>
</div>

^{Основная идея в моем коде $('.section-wrapper > .section:eq(0)') Я использовал первую секцию , чтобы сделать ход не обертка}

• Если вам не нужен эффект animate, вы можете легко изменить 1000 на 0 в .animate({'margin-left' : -slide_number * 100+'vw'} , 1000);

Answer 3

Вы сказали, что каждый раздел уже имеет полную ширину области просмотра. Итак, я предполагаю, что вы хотите добавить к скользящей анимации. Как насчет добавления полной ширины таким образом?

Отредактировано в соответствии с вашим CodePen :

$(document).ready(function() {
    $('.button').click(function() {
        $('.section-wrapper').css('margin-left', 
            `+=-${document.body.clientWidth}px`);
    });
});