Reputation: 11

Image resizing in slider

I have a problem with my slider. Currently on my homepage it works fine. But when i resize it to a mobile version (max: 480px), the image dissapears while resizing from 1920px to 480px. The slider itself (the buttons and border) stay the same, it's basically only the image itself. Jsfiddle: https://jsfiddle.net/s8jotqj3/2/

/* slider  test*/

#Slider {
    width: 100%;
    max-width: 1940px;
    height: 470px;
    margin-top:-150px;    
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.bgslide {
    background-color: black;
    position: relative;
    margin-top:440px;
    height:30px;
    z-index:5;
    bottom:0;
    opacity: 0.5;
}

#s1, #s2, #s3, #s4 {
    padding: 6px;
    background: white;
    position: absolute;
    left: 50%;
    bottom: 10px;
    opacity: 0.3;
    cursor: pointer;
    z-index: 999;
}

#s1 {
    margin-left: -36px;
    border-radius: 20px;
}

#s2 {
    margin-left: -12px;
    border-radius: 20px;
}


#s3 {
    margin-left: 12px;
    border-radius: 20px;
}

#s4 {
    margin-left: 36px;
    border-radius: 20px;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
    opacity: .50;
}

.SliderBinnen {
    width: 100%;
    max-width: 1930px;

    height: 470px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.control {
    display: none;
}

#Slide1:checked ~ .SliderCenter {
    margin-left: 0%;
}

#Slide2:checked ~ .SliderCenter {
    margin-left: -100%;
}

#Slide3:checked ~ .SliderCenter {
    margin-left: -200%;
}

#Slide4:checked ~ .SliderCenter {
    margin-left: -300%;
}

#Slide1:checked + #s1 {
    opacity: 1;
}

#Slide2:checked + #s2 {
    opacity: 1;
}

#Slide3:checked + #s3 {
    opacity: 1;
}

#Slide4:checked + #s4 {
    opacity: 1;
}

.SliderCenter {
    width: 400%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: hidden;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.slide img {
    width: 25%;
    float:left;
}

That's the code for the normal desktop screen.

This is my HTML code:

  <div id="SliderVanbuiten">
                <div class="SliderBinnen">

                        <input checked type="radio" name="slide" class="control" id="Slide1" />
                        <label for="Slide1" id="s1"></label>
                        <input type="radio" name="slide" class="control" id="Slide2" />
                        <label for="Slide2" id="s2"></label>
                        <input type="radio" name="slide" class="control" id="Slide3" />
                        <label for="Slide3" id="s3"></label>
                        <input type="radio" name="slide" class="control" id="Slide4" />
                        <label for="Slide4" id="s4"></label>

                    <div class="bgslide"></div>

                    <div class="SliderCenter">

                        <a class="slide inactive" href=""><img class="testshow" src="images/slide3.jpg" /></a>
                        <a class="slide inactive" href=""><img class="test" src="images/slide4.jpg" /></a>
                        <a class="slide inactive" href=""><img class="test" src="images/slide2.jpg" /></a>
                        <a class="slide inactive" href=""><img class="test" src="images/slide1.jpg" /></a>
                    </div>
                </div>
            </div>

Upvotes: 1

Answers (1)

haxxxton

Reputation: 6442

So the main issue you were facing is that by using <img> tags your images were scaling proportionately and disappearing upwards out of view. The reason you couldnt see this was because of the margin-top:-150px that was on the outermost container <div>.

By switching to divs with background-image styles you can use the css property background-size to make sure the image stays visible (I have selected cover as the background-size attribute, but feel free to use contain instead, you will just see some of the background grey color in doing so). I have added comments to the HTML and CSS where necessary to mark important changes, and show you what i removed.

CSS

/* slider  test*/

#SliderVanbuiten {
    width: 100%;
    max-width: 1940px;
    // height: 470px;
    // margin-top:-150px; // why is this here?
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.bgslide {
    background-color: black;
    position: relative;
    margin-top:440px;
    height:30px;
    z-index:5;
    bottom:0;
    opacity: 0.5;
}

#s1, #s2, #s3, #s4 {
    padding: 6px;
    background: white;
    position: absolute;
    left: 50%;
    bottom: 10px;
    opacity: 0.3;
    cursor: pointer;
    z-index: 999;
}

#s1 {
    margin-left: -36px;
    border-radius: 20px;
}

#s2 {
    margin-left: -12px;
    border-radius: 20px;
}


#s3 {
    margin-left: 12px;
    border-radius: 20px;
}

#s4 {
    margin-left: 36px;
    border-radius: 20px;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
    opacity: .50;
}

.SliderBinnen {
    width: 100%;
    max-width: 1930px;
    position:relative;
    //height: 470px;
    //position: absolute;
    //top: 0;
    //left: 0;
    overflow: hidden;
}

.control {
    display: none;
}

#Slide1:checked ~ .SliderCenter {
    margin-left: 0%;
}

#Slide2:checked ~ .SliderCenter {
    margin-left: -100%;
}

#Slide3:checked ~ .SliderCenter {
    margin-left: -200%;
}

#Slide4:checked ~ .SliderCenter {
    margin-left: -300%;
}

#Slide1:checked + #s1 {
    opacity: 1;
}

#Slide2:checked + #s2 {
    opacity: 1;
}

#Slide3:checked + #s3 {
    opacity: 1;
}

#Slide4:checked + #s4 {
    opacity: 1;
}

.SliderCenter {
    width: 400%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: hidden;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size:0; // fixes inline-block spacing
}

.slide {
    position:relative;
    width:25%;
    padding-bottom:440px; // must match bgslide margin-top
    height:0;
    display:inline-block;
}
.slide > div {
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background-size:cover;
    background-position:center center;
}

HTML

<body>
<main class="home">
    <div class="wallpaper1">
        <div id="SliderVanbuiten">
            <div class="SliderBinnen">

                <input checked type="radio" name="slide" class="control" id="Slide1" />
                <label for="Slide1" id="s1"></label>
                <input type="radio" name="slide" class="control" id="Slide2" />
                <label for="Slide2" id="s2"></label>
                <input type="radio" name="slide" class="control" id="Slide3" />
                <label for="Slide3" id="s3"></label>
                <input type="radio" name="slide" class="control" id="Slide4" />
                <label for="Slide4" id="s4"></label>

                <div class="bgslide"></div>

                <div class="SliderCenter">
                    <a class="slide inactive" href="">
                        <div class="test show" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
                    </a>
                    <a class="slide inactive" href="">
                        <div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
                    </a>
                    <a class="slide inactive" href="">
                        <div class="test" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
                    </a>
                    <a class="slide inactive" href="">
                        <div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
                    </a>
                </div>
            </div>
    </div>
    </div> <!-- missing a closing </div> -->
</main>
</body>

UPDATED JS FIDDLE

JS Fiddle

Upvotes: 1

Image resizing in slider

Answers (1)

Related Questions