0

Today I was trying to make a full HTML/CSS slider, the only problem I have right now is when I try to click the next/previous button my page is scrolling to the top of the page and I just don't know why.

Most of the solutions on internet are using javascript or jquery but I am not able to use any kind of javascript.

I hope anyone can help me! When you click the next/previous button you will notice the problem! I have made an example on jsfiddle as you can see below: https://jsfiddle.net/17cojwtv/

PS: i know that the images are not working!

All my items work like this:

<div class="slider">
  <ul>
    <li class="slide" id="no-js-slider-2">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
      <a href="#no-js-slider-1" class="prev">prev</a>
      <a href="#no-js-slider-3" class="next">next</a>
    </li>
  </ul>
</div>

Currently i only use this CSS:

ul li {
  list-style-type: none !important;
  margin: 0!important;
}

a.prev,
a.next {
  height: 100px;
  width: 43px;
  opacity: 0.7;
  text-indent: -99999px;
  cursor: pointer;
  -webkit-transition: opacity 200ms ease-out;
}

a.prev:hover,
a.next:hover {
  opacity: 1;
}

.prev {
  left: 0;
  /*  margin-top: 212px;*/
  position: absolute;
  background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
}

.next {
  /*margin-top: 212px;*/
  left: 669px;
  position: absolute;
  background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
}

.slider {
  margin: 0 !important;
  /*position: relative;*/
  height: 474px;
}

.slide {
  position: absolute;
  height: 100%;
  width: 100%;
}

.slider .slide:target {
  z-index: 100;
}

.slider img {
  margin: 0 !important;
}
Bart Nooijens
  • 133
  • 1
  • 1
  • 9

1 Answers1

0

I think there are some similar questions like this already in the site. anyhow here you go use onclick="return false;

          <li class="slide" id="no-js-slider-2">
         <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
        <a onclick="return false; href="#no-js-slider-1" class="prev">prev</a>
        <a onclick="return false; href="#no-js-slider-3" class="next">next</a>
</li>
Krishna Kamal
  • 124
  • 1
  • 8
  • Hi Kamal, Thanks for your fast answer! When i add onclick="return false" my slider is not working anymore! – Bart Nooijens Apr 14 '16 at 16:04
  • I didsearch for you... use any solution here http://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top-when-a-link-is-clicked-that-t – Krishna Kamal Apr 14 '16 at 16:21
  • Hi Kamal, I cannot use any javascript so most solutions will not work for me! the #! solutions sounds interesting but I can't seem to get it working as i don't know how to put my link in it! `href="#!no-js-slider-2"` Is not working for me – Bart Nooijens Apr 14 '16 at 16:26