I want to create a horizental scroll area for the mobiles . and i want to it be like this :

And i wnat to hide the scrollbar also too .

I tried this but there is a problem whith that and i cant give them width !

      <div style="overflow: auto hidden; display: flex;" id="v">
        <div>
          <img src="url" style="width: 100%; height: 20%;" alt="">
          <p>name</p>
        </div>
      </div>

CodePudding user response：

To make the scrollbar horizental

.container {
    overflow: auto hidden;
};

To hide the scrollbar use:

.container::-webkit-scrollbar {
     display: none;
}

CodePudding user response：

Maybe helps. Using overflow: auto;

#carousel {
    width: 80%;
    height: 200px;
    background-color: green;
    
    overflow: auto;
    white-space:nowrap;
}

#carousel .slide {
    display: inline-block;
}

<div id="carousel">
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
      <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/300x150"/>
    </div>  
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>