1

I am making auto-carousel, but li floating doesn't work. Why does the list stretch horizontally? If I set display: block; or overflow: hidden; to ul, it just cuts the bottom part and does not float the list.

HTML and CSS

    ul.slide-wrap {
        position: relative;
        width: 600%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .slide-box {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    li.slide-item {
        width: 100%;
        height: 100%;
        float: left;
    }
    <div class="slide-box">
        <ul class="slide-wrap">
            <li class="slide-item">1</li>
            <li class="slide-item">2</li>
            <li class="slide-item">3</li>
            <li class="slide-item">4</li>
            <li class="slide-item">5</li>
        </ul>
    </div>
Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
MovingRoot Lee
  • 55
  • 8

1 Answers1

0

I did this, I didn't resolve it but here you have some tips:

ul.slide-wrap {
    /* position: relative; */
    width: 600%;
    /* height: 100%; */
    /* you can use height: 100vh; */
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
.slide-box {
    /* position: absolute; */
    top: 0;
    width: 100%;
    /* height: 100%; */
    z-index: 1;
}
li.slide-item {
    width: 100%;
    /* height: 100%; */
    /* float: left; */
}

And you can set this to the body to ensure you don't pass 100% width so you don't have that horizontal scroll:

body {
    max-width: fit-content;
}
ericmp
  • 1,163
  • 4
  • 18
  • 1
    Thank you for your comment! I just tried but still list does not float.. – MovingRoot Lee Feb 01 '21 at 09:15
  • and yea, height: 100% i think doesn't really work, i'd use 100vh. Check this question - https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window – ericmp Feb 01 '21 at 09:15