-2

Somehow I have a margin between my boxes in my horizontal slider that I cannot seem to fix. I've tried fiddling around with margin-right:-3, word-spacing: -3;, display:block; float:left;, display:inline-flex; a lot more. I'm not sure what is causing it, and thus I have a hard time looking for a solution. I thought it was the inline-block.

Here a fiddle; however I could not seem to get the horizontal mouse effect to work that is working in my own code: https://jsfiddle.net/urzsj724/1/

this is what i'm using for the horizontal scroll with mousewheel:

https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js

$(function() {
   $(".wrapper").mousewheel(function(event, delta) {
      this.scrollLeft -= (delta * 10);
      event.preventDefault();
   });
});



.container {
  width: 100vw;
  margin:0;
}

.wrapper {
  overflow: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  word-spacing: -10;
}
.box {
  display: inline-block;
  height:100vh;
  width: 40vw;
  background-color: white;
  border:1px solid black;
  text-align: center;
  vertical-align: center;
  margin:0;
}

.box img{
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

  <div class="container">
    <div class="wrapper">
      <div class="box">Item1</div>
      <div class="box">Item2</div>
      <div class="box">Item3</div>
      <div class="box">Item4</div>
    </div>
  </div>
L Leah
  • 61
  • 8

2 Answers2

1

You can try display: inline-flex on the wrapper.

https://jsfiddle.net/3qmwLt06/

.wrapper {
 overflow: hidden;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  word-spacing: -10;
  display:inline-flex;
}
Claytronicon
  • 1,437
  • 13
  • 14
0

inline-blocks always creating small margins between them, try use for this:

.box {
    font-size: 0
}

After font-size 0, set your font-size.

CuteShaun
  • 139
  • 7