add percentage value instead of px

user_13506727 0
Viewed 70

i want to create (some kind of) a fullwidth slider, where i have a flex-wrapper with several child sections. each seaction is 100vw arranged in a row. now i want to move the flex-wrapper with margin-left 100% everytime you click on a button. it should not add it one time, it should stack up like 100%, click, 200%, click, 300% and so on...

i came up with the following.

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

it doesnt seem to work. when i replace 100% with 1920px it works as intended. (on my fullhd monitor)

any ideas?

EDIT: heres my codepen, i hope its getting clearer now: https://codepen.io/tuxedo/pen/gOazMxv

css jquery
3 Answers

You said that each section is already at full viewport width. So I assume you want to do the addition for the sliding animation. What about adding the full width this way?

Edited according to your CodePen:

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

Maybe this's what you're looking for.

$(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);
    });
});

or another way:

var width_value = 0;

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

Somethings you need to know

  • id should be unique .. don't use same id for more than one element (id="section") should be class="section otherClasses"
  • When you work with display : flex; use min-width , max-width , min-height , max-height
  • use flex-direction: column;
  • No need to use justify or align or flex for the wrapper it will make the wrapper stick on the middle section

$(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>

The main idea in my code $('.section-wrapper > .section:eq(0)') I used the first section to do the move not the wrapper

  • If you don't need the animate effect you can easily change 1000 with 0 in .animate({'margin-left' : -slide_number * 100+'vw'} , 1000);
user_33858270
Related