Question 236200 in Html Question posted in
Some basic documentation can be found here.

Html – How can I have a horizontal slider in a max-width container?

I’m currently trying to achieve the slider that you can see in the image below. It comes with some special requirements:

  • Red lines indicate the max-width container at the image
  • It needs to be aligned with the centered max-width container from section one
  • It also needs to overflow to the right, till the end of the screen
  • When scrolling through the items it should not overlap the "Work" heading but go underneath it.
  • When scrolling to the end it should stop at the right end of the max-width container
  • In the responsive mobile version the heading doesn’t rotate anymore and it is placed before the header.

I’ve been struggling with this for quite some time. Also tried to do some research and found an article. I played with the CodePen example but can’t get it to work, when I try to add the heading next to the slider.

Does anybody know a solution for that? I would appreciate if no JavaScript is included.

My code looks something like this. Please use my updated Code Pen from the mentioned article: https://codepen.io/hraschan-the-looper/pen/VwqLbEv

<section id="home"></section>
<section id="work">
  <div class="flex flex-row">
    <h1>Work</h1>
    <div id="slider">...</div>
  </div>
</section>

screenshot of wide screen layout

screenshot of narrow screen layout

Tags:

2

Answers


  1. 0 
    #slider {
  overflow: auto;
  white-space: nowrap;
}

#slider item{
 width:'50px'
}

    Please try and let me know what’s your opinion

    Login or Signup to reply.
  2. 0

    Without seeing your CSS, it is difficult to fully understand your problem. However, your markup looks to be adding a couple extra containers around the slider/gallery. In the codepen, only ‘main’ is the direct parent of the gallery. I was able to get it working by omitting the extra containers as in the original pen and using translate to position the title.

      <h1 id="work">Work</h1>
  <div class="gallery">
    <div class="wrapper">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
      <div class="item">15</div>
      <div class="item">16</div>
    </div>
  </div>

    #work {
  transform: rotate(-90deg);
  translate: -140px 160px;
  border: 1px solid black;
  height: 30px;
  width: 220px;
  display: flex;
  justify-content: flex-end;
}
.gallery {
  margin-top: 0 !important;
}

    And for mobile on whatever breakpoint and below…

    h1#work {
  transform: rotate(0deg);
  translate: 0 10px;
  justify-content: flex-start;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search