1

Hello Guys I have a little question:

I am using a css slider (im not allowed to use javascript) which is working perfectly. Only problem is, when I use it, whe website jumps to the top, how do i manage to fix this?

PS: When testing use 4 pictures size 500 by 500 and call them 1s,2s,3s,4s. place them in the same folder.

Regards

My HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 <link rel="stylesheet" href="Standart.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>
</head>

<body>
<div id='headline'>
<h1> Test </h1>
</div>
<br>
<br>
<br>
<br>

    <div class="slider-holder">
        <span id="slider-image-1"></span>
        <span id="slider-image-2"></span>
        <span id="slider-image-3"></span>
        <span id="slider-image-4"></span>
        <div class="image-holder">
            <img src="1s.jpg" class="slider-image" />
            <img src="2s.jpg" class="slider-image" />
            <img src="3s.jpg" class="slider-image" />
            <img src="4s.jpg" class="slider-image" />
        </div>
        <div class="button-holder">
            <a href="#slider-image-1" class="slider-change"></a>
            <a href="#slider-image-2" class="slider-change"></a>
            <a href="#slider-image-3" class="slider-change"></a>
            <a href="#slider-image-4" class="slider-change"></a>
        </div>
    </div>

<div id="ubba">
<p>
Überschrift:
</p>
</div>

<div id="besch">
<p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>


</body>
</html>

My CSS:

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
body, html {
    padding: 0; 
    margin: 0;
}
h1 {
    padding: 0;
    margin: 0;
}

#headline {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
}

#bild {

}

#bildweg {
    }

#ubba {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-left: auto; 
    margin-top: auto;
}
#besch {
font-family: "Open Sans", sans-serif;
    font-size: 20px;
    text-align: left;
    padding-right: 60%; 
    padding-left: 5%;
    margin-top: 0%;
}

body { background: #ffffff; }
#slidy-container { 
  width: 70%; overflow: hidden; margin: 0 auto;
}

.slider-holder
        {
            width: 500px;
            height: 500px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }

        .image-holder
        {
            width: 2000px;
            background-color: #FFF;
            height: 500px;
            clear: both;
            position: relative;

            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }

        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }

        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }

        #slider-image-2:target ~ .image-holder
        {
            left: -500px;
        }

        #slider-image-3:target ~ .image-holder
        {
            left: -1000px;
        }

        #slider-image-4:target ~ .image-holder
        {
            left: -1500px;
        }

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 10px;
            background-color: #ffffff;
        }
1

2 Answers 2

1

Wihout having tested your code I would guess:

Clicking this link href="#slider-image-1" certainly causes the browser to scroll (i.e. jump) to that anchor.

0
1

I hope this demo works for you

* {
  box-sizing: border-box;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
  background: #ecf0f1;
  color: #444;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: 0 auto;
}
.slider {
  background: #fff;
  position: relative;
  margin: 2rem 0;
  overflow: hidden;
  padding-bottom: 2.5rem;
  border: 0.25rem solid #95a5a6;
}
.slider::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  content: '';
  display: block;
  background: #34495e;
  height: 3rem;
}
.slide-switch {
  display: none;
}
.slide-label {
  position: absolute;
  bottom: 1rem;
  display: block;
  z-index: 5;
  height: 1rem;
  width: 1rem;
  text-indent: 1rem;
  overflow: hidden;
  background: #2980b9;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s;
}
.slide-label:nth-of-type(1) {
  left: 1rem;
}
.slide-label:nth-of-type(2) {
  left: 2.5rem;
}
.slide-label:nth-of-type(3) {
  left: 4rem;
}
.slide-label:nth-of-type(4) {
  left: 5.5rem;
}
.slide-label:nth-of-type(5) {
  left: 7rem;
}
.padded {
  padding: 1rem 2rem;
}
.slide-content {
  width: 100%;
  background: #fff;
  float: left;
  margin-right: -100%;
}
.slide-switch:checked + .slide-label {
  background: #3498db;
}
.slide-switch:not(:checked) + .slide-label + .slide-content {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.slide-switch:checked + .slide-label + .slide-content {
  animation: slide 1s;
}
@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
<div class="wrapper">

  <div class="slider">

    <!-- Works with as many slides as are added in-->

    <input type="radio" name="slide-switches" id="slide_text" checked class="slide-switch">
    <label for="slide_text" class="slide-label">Slide Text</label>
    <div class="slide-content padded">
      <img src="http://i.imgur.com/1k0xC1C.jpg">
    </div>

    <input type="radio" name="slide-switches" id="slide_image" class="slide-switch">
    <label for="slide_image" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://i.imgur.com/1k0xC1C.jpg">
    </div>

   <input type="radio" name="slide-switches" id="slide_image2" class="slide-switch">
    <label for="slide_image2" class="slide-label">Slide Image</label>
    <div class="slide-content">
      <img src="http://i.imgur.com/1k0xC1C.jpg">
    </div>

  </div>

  <p>Paragraph outside slider</p>

</div>

8
  • doesent work whe i try to erase the text and add a picture instead :( Nov 28, 2015 at 14:52
  • Now I managed everything to work, but only ne little prob: The first pictire doesent load until I scroll to another and then scroll back, what have I done wrong? Nov 28, 2015 at 15:01
  • Can you look for the code snipped I've added at the bottom of my answer. It works fine. Just replace your content. Nov 28, 2015 at 15:02
  • Maybe couldyou replace the first text with an picture? That would be really helpful, as i am a total noob in this, I have probably created more problems on earth than windows did :D Nov 28, 2015 at 15:14
  • works now, but created another problem: the first picture has a whit border, maybe its because the class is slide text and not image? Nov 28, 2015 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.