Automatic image transition in css slider

Asked

Viewed 2,781 times

0

Good morning guys, I’m new to Imasters and the development part in general and I’m having a very simple question, don’t judge kkk

I created this slider described below and I can’t do the automatic image exchange.

For example, every 3 seconds the image fade out and enter another with basic fade in, or even slide to the side. Animation is not so important.

What I really wanted was to make the code work to automate image exchange.

Could someone please give me a light? I tried some things here but I couldn’t :/

Follow the code:

/*------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------*/


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


.div-slider{
width: auto;
height: 400px;
text-align: center;
}
.slides-front {
    padding: 0;
    width: 980px;
    height: 370px;
    display: block;
    margin: auto;
    position: relative;
}

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

.slides-front input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 980px;
    height: 370px;
    display: block;
    position: absolute;

    transform: scale(0);

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

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

.nav label {
    width: 150px;
    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 0.1s;
}

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

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

.nav-dots .nav-dot {
	top: 375px;
	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, {
	background: rgba(0, 0, 0, 0.8);
}
<div class="div-slider">
  <ul class="slides-front">
    <input type="radio" name="radio-btn" id="img-1" checked="">
    <li class="slide-container">
    <div class="slide">
      <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png">
        </div>
    <div class="nav">
      <label for="img-3" class="prev">‹</label>
      <label for="img-2" class="next">›</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2">
    <li class="slide-container">
        <div class="slide">
          <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png">
        </div>
    <div class="nav">
      <label for="img-1" class="prev">‹</label>
      <label for="img-3" class="next">›</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3">
    <li class="slide-container">
        <div class="slide">
          <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png">
        </div>
    <div class="nav">
      <label for="img-2" class="prev">‹</label>
      <label for="img-1" class="next">›</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>
    </li>
  </ul>
</div>

Any hint is welcome. I thank you since (:

Vlw

html css slider transition

  • The way you motou vc will only be able to solve this with JS or jQuery. Because you have an interaction using these Arrow Keys and Ball Balls to make the slide appear and disappear, so with CSS you can’t do this automatic switch, unless it’s something much simpler than that, without these "controls" which the user uses to switch by clicking the arrow. If you want to use Bootstrap here’s an example https://answall.com/questions/293048/como-alterar-o-efeito-padr%C3%A3o-do-slide-do-bootstrap-para-fade/293124#293124

  • Here are two more examples of galleries with fade, can without the pro user controls go from one to the other: https://answall.com/questions/288556/bug-no-slideshow-se-ficar-muito-tempo-fora-do-separador/288581#288581 and here tb https://en.stackoverflow.com/questions/267212/fez-3-slidesshow-mas-entre-os-slidesshows-esta-haver-um-espa%C3%A7o/267251#267251

  • I get it. I’m going to take a look and try to deploy JS then. But if you have a solution with CSS, I take out the "control" arrows and leave only the balls. It’s like?

  • Or in case I have to take all "control" codes and leave only automatic css in the image exchange? ! (:

  • Dude, that’s right, like the controls you’re not gonna be able to do. Now if it’s just the images exchanging with fade ai vc resolves only with CSS, like a slideshow, but without these navigation artifices by clicking... In these links I commented there are some examples of how to make the automatic slideshow.

  • Demorow. It’s just that I thought for some reason I could do something with CSS just by using Animation or img Transition, I don’t know. But if there’s no way, there’s no way. I will try to deploy JS first, if it gets too complicated I leave only in Transition in CSS without even control.

  • Man, thank you so much for the strength!

  • Dude you could even put a @keyframes in your image to disappear say in 3 seconds, the problem is that it will disappear but the next image will not appear.... This because in order for it to appear you need to click on some element of the navigation... you cannot make this automatic "click" event understand. This is a type of interaction that only the user can do, or with JS you can solve it as in the Bootstrap example I put in the link above

Show 3 more comments

1 answer

0


Only with CSS you won’t be able to, but with a little code in jQuery you can automate the process using setInterval(), which is an interval timer that will call a function that will go checking the next radio button, and when it arrives at the last, check the first, and so on.

When placing the mouse over the slider div, the timer is canceled, when removing the mouse, the process starts again. I used the method .hover jQuery:

$(document).ready(function(){
   
   var slids = $(".div-slider [type=radio]"); // busca os radios na div
   var slids_len = slids.length; // conta o número de radios
   var intervalo = 2; // intervalo em segundos
   
   function rodar(){
      var slids_ativo = $(".div-slider [type=radio]:checked")
      .attr("id")
      .match(/\d+/)[0]; // pega o valor numérico do id do radio checado

      if(slids_ativo == slids_len) slids_ativo = 0; // se estiver no último slide, volta pro primeiro

      slids.eq(slids_ativo).prop("checked", true); // checa o radio da vez
   }
   
   var tempo = setInterval(rodar, intervalo*1000); // inicia o temporizador
   
   $(".div-slider").hover(
      function(){ // função quando entra o mouse
         clearInterval(tempo); // cancela o temporizador
      },
      function(){ // função quando retira o mouse
         tempo = setInterval(rodar, intervalo*1000); // reinicia o temporizador
      }
   );
   
});
.div-slider{
width: auto;
height: 400px;
text-align: center;
}
.slides-front {
    padding: 0;
    width: 980px;
    height: 370px;
    display: block;
    margin: auto;
    position: relative;
}

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

.slides-front input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 980px;
    height: 370px;
    display: block;
    position: absolute;

    transform: scale(0);

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

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

.nav label {
    width: 150px;
    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 0.1s;
}

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

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

.nav-dots .nav-dot {
	top: 375px;
	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, {
	background: rgba(0, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-slider">
  <ul class="slides-front">
    <input type="radio" name="radio-btn" id="img-1" checked="">
    <li class="slide-container">
       <div class="slide">
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
       </div>
       <div class="nav">
         <label for="img-3" class="prev">‹</label>
         <label for="img-2" class="next">›</label>
       </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2">
    <li class="slide-container">
        <div class="slide">
          <img src="https://media.alienwarearena.com/media/1327-w.jpg">
        </div>
    <div class="nav">
      <label for="img-1" class="prev">‹</label>
      <label for="img-3" class="next">›</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3">
    <li class="slide-container">
        <div class="slide">
          <img src="https://imagens.canaltech.com.br/123987.210185-JPG.jpg">
        </div>
    <div class="nav">
      <label for="img-2" class="prev">‹</label>
      <label for="img-1" class="next">›</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>
    </li>
  </ul>
</div>

  • Right partner! It became the business here. Even more so with this setting that made "When placing the mouse on the slider div, the timer is canceled, when removing the mouse, the process starts again." ----------- Man thanks so much for your help!

Browser other questions tagged html css slider transition

You are not signed in. Login or sign up in order to post.