Difficulties with slider and overflow:Hidden

Asked

Viewed 330 times

0

I have a structure in HTML and CSS to make a slider, should work as follows: The images are next to each other, however, only one appears on the screen, and as the images will be next to each other, the slider goes "rotating", fitting the image on the screen. So here’s what I did. I put a float:left; for images to be side by side, and this only works if the width size of the parent element is large enough for all images. Otherwise, the images are underneath each other. I need to make a slider like this http://cssslider.com/responsive-slider-2.html or this http://globoesporte.globo.com/, where the images are next to each other, and as we navigate, they drag left and right, my problem is that I can’t get the images aligned next to each other. I can only do it when I increase the width of the parent element, and then I can’t "hide" the images that leave the screen.

Here is my fiddle: https://jsfiddle.net/0gjoa6n8/1/

If you change the overflow of #slider for scroll, They will see that the image is not side by side, but one below the other. How to leave them side by side, however, hiding those that leave the screen ?

html css html5 css3

2 answers

1


The problem was in ul, who was doing the wrap. After adding nowrap in white space by ul’s css, the content was no longer "wrapped up", and stood side by side.

By default, the elements when they stand side by side have a blank space separating them, and also by default, the html "wraps" this space, preventing the images in this case to stand side by side, because each blank they are wrapped and are under each other. When we tell the blank space not to be wrapped with no-wrap, the problem no longer occurs.

The fiddle updated: https://jsfiddle.net/0gjoa6n8/2/

1

I don’t know exactly if this is what you want to create but if it is will have to make some changes to your code, follows below:

<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div#sliderContent > input{
            position:relative;
            top:12em;
            left:5em;
        }
        ul#slider{
            list-style:none;
            margin:0px;
            padding:0px;
            border:1px solid black;
            height:10em;
            width:15em;
        }
        ul#slider > li {
            display:inline;
        }
        li > label > img {
            width:15em;
            height:10em;   
            display:none;
        }
        input#slide1:checked ~ ul#slider>li>label[for=slide1]>img,
        input#slide2:checked ~ ul#slider>li>label[for=slide2]>img,
        input#slide3:checked ~ ul#slider>li>label[for=slide3]>img,
        input#slide4:checked ~ ul#slider>li>label[for=slide4]>img
        {
            display:block;
        }
    </style>
</head>
<body>
    <div id="sliderContent">
        <input type="radio" id="slide1" name="slide" checked />
        <input type="radio" id="slide2" name="slide" />
        <input type="radio" id="slide3" name="slide" />
        <input type="radio" id="slide4" name="slide" />
        <ul id="slider">
            <li>
                <label for="slide1">
                    <img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" />
                </label>
            </li>
            <li>
                <label for="slide2">
                    <img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" />
                </label>
            </li>
            <li>
                <label for="slide3">
                    <img src="http://melindahyder.com/wp-content/uploads/2012/11/Fashion.jpg" />
                </label>
            </li>
            <li>
                <label for="slide4">
                    <img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" />
                </label>
            </li>
        </ul>
    </div>
</body>

I hope I’ve helped you!

  • Thanks for the help, but it wasn’t what I needed, I just needed to add a nowrap in ul. But thanks for your help !

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.