In general, 5 blocks should be displayed on the page, the rest should be advanced.
* 1 each - offset by 210px *

I saw the solutions to js , but I had problems with css they crawl into the second line

 body { background: #4d5b6f; } .hg { width: 200px; height: 200px; border-radius: 10px; background-size: cover; background: red; float: left; margin: 5px; } .ff { width: 1050px; height: 210px; overflow-y: hidden; overflow-x: scroll; white-space: nowrap } 
 <div class="ff"> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> </div> <div id="+1">вперед</div> <div id="-1">назад</div>

Closed due to the fact that off-topic participants Stepan Kasyanenko , user192664, 0xdb , Jarvis_J , Let's say Pie 7 Nov '18 at 16:17 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reasons:

  • " Learning tasks are allowed as questions only on the condition that you tried to solve them yourself before asking a question . Please edit the question and indicate what caused you difficulties in solving the problem. For example, give the code you wrote, trying to solve the problem "- Stepan Kasyanenko, let's say Pie
  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Community Spirit, 0xdb, Jarvis_J
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • and what is wrong? here all the blocks are in one line - Pavel Igorevich
  • The blocks show 5, and there are 7 of them, so that you can see all 7 through the horizontal scroll bar - Denis Lebedev

4 answers 4

Another option with flex offer:

 var totalWidth = 0; $('.slider-item').each(function(index) { totalWidth += parseInt($(this).outerWidth(true), 10); }); $('.slider-win').width(totalWidth); $('#sl-next').on('click', function(){ var $this = $(this), $slider = $this.closest('.slider'), $sliderWin = $slider.find('.slider-win'), item = $sliderWin.find('.slider-item'), pos = item.outerWidth(true); if($sliderWin.css('margin-left') <= '-1200px'){ $sliderWin.animate( {'margin-left': '0px'}, 1000 ); } else { $sliderWin.animate( {'margin-left': '-='+pos}, 1000 ); } }); $('#sl-prev').on('click', function(){ var $this = $(this), $slider = $this.closest('.slider'), $sliderWin = $slider.find('.slider-win'), item = $sliderWin.find('.slider-item'), pos = item.outerWidth(true), posX = $sliderWin.offset().left; if(posX <= 0){ $sliderWin.animate( {'margin-left': '+='+pos}, 1000 ); } else { $sliderWin.animate( {'margin-left': '0px'}, 1000 ); } }); 
 * { box-sizing: border-box; } html, body { padding: 0; margin: 0; } body { background: #4d5b6f; font-family: sans-serif; } .slider { max-width: 425px; width: 100%; margin: 0 auto; overflow: hidden; position: relative; } .slider-item { width: 200px; height: 200px; line-height: 200px; text-align: center; color:#fff; font-weight: bold; font-size:30px; border-radius: 10px; background-size: cover; background: orangered; float: left; margin: 5px; flex-grow: 0; flex-shrink:0; } .slider-win { display: flex; overflow-y: hidden; margin-bottom: 30px; /* overflow-x: scroll; */ } .slider-control { display: flex; justify-content: space-between; } .sl-btn { background: #fff; display: inline-block; padding: 5px 10px; border-radius:5px; cursor: pointer; } .sl-btn:hover { opacity: .85; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <div class="slider"> <div class="slider-win"> <div class="slider-item">1</div> <div class="slider-item">2</div> <div class="slider-item">3</div> <div class="slider-item">4</div> <div class="slider-item">5</div> <div class="slider-item">6</div> <div class="slider-item">7</div> </div> <div class="slider-control"> <div id="sl-prev" class="sl-btn">назад</div> <div id="sl-next" class="sl-btn">вперед</div> </div> </div>

  • one
    Thank you very much - Denis Lebedev

The meaning of this. In this example, so that the blocks are aligned on the horizontal axis implemented on flex-ах . But, in order for the scroll bar to appear, the blocks themselves should not have a width, since they are affected by the immediate container (parent) . To set the height and width of a .hg block, .hg should .hg block into it with the required width and height

 body { background: #4d5b6f; } .ff { display: flex; width: 300px; overflow: auto; background: blue; } .hg { height: 50px; border-radius: 10px; background: red; margin: 5px; } .inner-block{ height: 50px; width: 50px; } 
 <div class="ff"> <div class="hg"><div class="inner-block"></div></div> <div class="hg"><div class="inner-block"></div></div> <div class="hg"><div class="inner-block"></div></div> <div class="hg"><div class="inner-block"></div></div> <div class="hg"><div class="inner-block"></div></div> <div class="hg"><div class="inner-block"></div></div> <div class="hg"><div class="inner-block"></div></div> </div> <div class="btn" id="prev">вперед</div> <div class="btn" id="next">назад</div>

    We have already given the correct answer above, but if you need specifically on your example:

     body { background: #4d5b6f; } .hg { width: 200px; height: 200px; border-radius: 10px; background-size: cover; background: red; margin: 5px; display: inline-block; } .ff { width: 1050px; height: 210px; overflow-y: hidden; overflow-x: scroll; white-space: nowrap } 
     <div class="ff"> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> <div class="hg"></div> </div> <div id="+1">вперед</div> <div id="-1">назад</div>

    • funforlifefix, do not worry even if given an answer, any answer is useful and interesting ... keep a plus - Air

    And best of all, like this:

     let hg = document.getElementsByClassName('hg'); console.log(hg) let move = 0; function plus(){ move -= 210; hg[0].style.marginLeft = move + 'px'; } function minus(){ move += 210; hg[0].style.marginLeft = move + 'px'; } 
     .ff{ width:1080px; height:210px; border: 1px solid #000; overflow: hidden; } .ff .hg{ width:200px; height:200px; border-radius:10px; background-size: cover; background:red; margin:5px; display: inline-block; } #plus,#minus { cursor: pointer; } 
     <div class="ff"> <div class="hg">1</div> <div class="hg">2</div> <div class="hg">3</div> <div class="hg">4</div> <div class="hg">5</div> <div class="hg">6</div> <div class="hg">7</div> </div> <div id="plus" onclick="plus()">вперед</div> <div id="minus" onclick="minus()">назад</div>