Screenshot slider with CSS like iOS store

Question

How can i make the same screenshot scroller like here? https://itunes.apple.com/us/app/candy-crush-saga/id553834731?mt=8

I don't want to use jQuery or anything, just html and css.

Answer 1

You need two embedded containers: a viewport and a container for the screenshots.

The viewport needs to be overflow:scroll, and the screenshot container must be as wide as all the screenshots next to each other. The screenshots need to be float:left.

That's basically all. Here's the HTML:

<div class="viewport">
    <div class="itemContainer">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

And the CSS

.item {
    width: 100px;
    height: 100px;
    background: lightblue;
    float: left;
    margin-right: 20px;
}
.itemContainer {
    width: 1000px;
    float: left;
}
.viewport {
    float: left;
    width: 350px;
    border: thin red solid;
    overflow: scroll;
}

and a demo

Answer 2

If you don't want to use script, you need to use the built-in scroller of the broswer.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_js_overflow-x

If you want to hide the scrollbars (not recommend in native scrollbars) you can do this:

.wrapper {
  width:300px;
  overflow-x:hidden;
}

.content {
  height:100px;
  padding-right:20px;
  margin-right:-20px;
  overflow-y:auto;
}

<div class="wrapper">
  <div class="content">
    Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum   
  </div>
</div>

Hide scroll bar, but still being able to scroll