Automatic image transition in the slider with css

Question

Automatic image transition in the slider with css

Navigation

#1 by (0 votes)

0

Good morning, I'm new to Imasters and the development part in general and I have a very simple question, do not judge kkk

I created this slider described below and I can not do the automatic swapping of images.

For example, every 3 seconds the image fade out and enter another with basic fade in, or even slide sideways. The animation is not that important.

What I really wanted to do was make the code work to automate the exchange of images.

Could someone please give me a light? I tried some things here but I could not: /

Follow the code below:

/*------------------- 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><divclass="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><divclass="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><divclass="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 tips are welcome. Thanks in advance (:

Vlw

html css slider transition

asked by anonymous 04.10.2018 / 13:47

1 answer

Error migrating site WordPress Notice: Undefined index: $ _FILES [duplicate]

score 0 · Accepted Answer

Only with CSS you will not be able to, but with a small code in jQuery you can automate the process using setInterval() , which is an interval timer that will call a function that will go by checking the next radiobutton, and when it arrives in the latter, check the first, and so on.

When you place your mouse over the div of the slider, the timer is canceled, when you remove the mouse, the process starts again. For this I used the .hover method of 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><divclass="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><divclass="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><divclass="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><divclass="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>