Difficulties with slider and overflow: hidden

Navigation
0

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

Here's my fiddle: link

If you switch% from% from% to% with%, you 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?

    
asked by anonymous 12.07.2015 / 19:42

2 answers

1

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

By default, the elements side by side have a blank space separating them, and by default, the html "wraps" this space, preventing the images in this case from being side by side, because each space in white they are wrapped and are one underneath the other. When we ordered the blank space not to be wrapped with no-wrap, the problem no longer occurred.

The updated fiddle: link

    
13.07.2015 / 16:40
1

I do not know exactly if this is what you want to create, but if so, you will have to make some changes to your code, 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><labelfor="slide2">
                    <img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg"/></label></li><li><labelfor="slide3">
                    <img src="http://melindahyder.com/wp-content/uploads/2012/11/Fashion.jpg"/></label></li><li><labelfor="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 have helped you!

    
13.07.2015 / 00:19
Remove jQuery registry [closed] Larger space between spinner items