-1

I´d like to know, if it´s possible to add next and previous buttons to my homepage slider, which is made only with HTML and CSS code (without any Javascript). If yes - how can i manage it?

https://codepen.io/michal-gambo/pen/zYGrMZo

My website is: autodielytatra.sk. My code:

<div class="content" id="slider">
<figure><a href="https://www.autodielytatra.sk/sk/kategoria/nahradne-diely"><img class="hp-img-print" src="https://www.autodielytatra.sk/files/upload/homepage/images/homepage-1.jpg" style="margin-bottom: 10px;" /></a> <a href="https://www.autodielytatra.sk/sk/search?q=plast+%C5%BElt%C3%BD+domie%C5%A1ava%C4%8D"> <img class="hp-img-print" src="https://www.autodielytatra.sk/files/upload/homepage/images/homepage-2.jpg" /></a> <a href="https://www.autodielytatra.sk/sk/kategoria/akciovy-tovar"> <img class="hp-img-print" src="https://www.autodielytatra.sk/files/upload/homepage/images/homepage-3.jpg" /></a> <a href="https://www.autodielytatra.sk/sk/kategoria/nahradne-diely"> <img class="hp-img-print" src="https://www.autodielytatra.sk/files/upload/homepage/images/homepage-1.jpg" /></a></figure>
</div>

1 Answer 1

0

A quick google for 'CSS only slider with prev and next buttons' brought up many things, including this:

https://codepen.io/AMKohn/pen/EKJHf

It is very, very difficult to be specific given the information you have provided.

The slider component:

<ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
        <div class="slide">
            <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-6" class="prev">&#x2039;</label>
            <label for="img-2" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-1" class="prev">&#x2039;</label>
            <label for="img-3" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-2" class="prev">&#x2039;</label>
            <label for="img-4" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-3" class="prev">&#x2039;</label>
            <label for="img-5" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-4" class="prev">&#x2039;</label>
            <label for="img-6" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-5" class="prev">&#x2039;</label>
            <label for="img-1" class="next">&#x203a;</label>
        </div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>

And the CSS:

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

      opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots .nav-dot {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
    background: rgba(0, 0, 0, 0.8);
}
9
  • You just copy paste the code from the codepen.io/AMKohn/pen/EKJHf - I already found this days ago. I just need to know if it is possible to add next prev buttons to slider, that is made with my HTML and CSS code. HTML code is the one I have in the question and the CSS is here: Feb 14, 2020 at 15:35
  • #slider { overflow: hidden;} #slider figure {position: relative; width: 500%; margin: 0; left: 0; animation: 15s slider infinite; } #slider figure:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; cursor: pointer; } #slider figure img {float: left; width: 20%;} @keyframes slider { 0% {left: 0;} 20% {left: 0;} 25% {left: -100%;} 45% {left: -100%;} 50% {left: -200%;} 70% {left: -200%;} 75% {left: -300%;} 100% {left: -300%;} } Feb 14, 2020 at 15:37
  • You didn't provide any html or css, just a link to an external website. That's not really how it works. You need to build a codepen and narrow it down to the specific slider element. If you have already found a codepen that solves your problem, why don't you incorporate it into your project? Feb 14, 2020 at 15:38
  • because it´s not what I´m looking after. I have a working code - full HTML code is in my question and CSS is in above article. I need the to add next and previous buttons to my code, but I don´t know, if it is possible to implement such option to it - I can put Javascript in it but I don´t know, how to make it working together Feb 14, 2020 at 16:02
  • how to add (html, css, javascript) to add next and previous button option??? Feb 14, 2020 at 16:10

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.