The problem is basically in which the class that makes the transitions (.img-fader
) using fadeOut
and fadeIn
is in the body
, so all content will be affected.
One solution is to put the form
out of div container
and apply the class .img-fader
to that div
. With that, the form
will not be affected.
You also need to change the CSS of form
so that it is centered on the screen, and adjusts the height height
of div container
to occupy the entire screen.
Also replace the class container
for container-fluid
, which will occupy the entire width of the screen.
HTML will look like this:
Don’t forget to delete the class img-fader
of <body>
.
<div class="container-fluid img-fader">
</div>
<form class="login-form" method="post" action="https://weec-sistemas.000webhostapp.com/sistema-teste/login.php">
<div class="login-wrap">
<p class="login-img"><i class="fa fa-lock" aria-hidden="true"></i></p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" id="loginUsuario" name="loginUsuario" class="form-control" placeholder="Usuário" autofocus>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input type="password" id="senhaUsuario" name="senhaUsuario" class="form-control" placeholder="Senha">
</div>
<label class="checkbox">
<input type="checkbox" value="lembra-me"> Lembrar me
<span class="pull-right"> <a href="https://weec-sistemas.000webhostapp.com/sistema-teste/login.php#"> Esqueceu senha?</a></span>
</label>
<input type="submit" name="logar" value="Login" class="btn btn-primary btn-lg btn-block" data-disable-with="Login">
<!-- <button class="btn btn-info btn-lg btn-block" type="submit">Signup</button> -->
</div>
</form>
Changes to the CSS
Change the class .login-form
in your CSS below by this, will center on the screen the form:
.login-form {
max-width: 350px;
background: #d5d7de, fixed;
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Finally, include the code below in your file img-slider.js
at the very beginning of $(document).ready(function(){
:
$(window).on("load resize", function(){
$(".container-fluid").css("height",window.innerHeight+"px");
});
Thus remaining:
$(document).ready(function(){
$(window).on("load resize", function(){
$(".container-fluid").css("height",window.innerHeight+"px");
});
var count = 0;
var images = ["img/bg-1.jpg","img/bg-2.jpg","img/bg-3.jpg"];
var image = $(".img-fader");
image.css("background-image","url("+images[count]+")");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},5000);
});
See working here.
Without source code it is difficult to help. But I believe this is happening because your slider was tagged <body>! I suggest you create a div take 100% of width and height and in it assign the slider! Thus, this component will be separate from the other elements of your site! This is happening because who is being changed is the body, soon everything inside him is also changed!
– Wesley Redfield
The code is here: https://weec-sistemas.000webhostapp.com/sistema-teste/scripts.txt
– Wesley Rodrigues
I could explain myself?
– Wesley Rodrigues
About flashing, I noticed that when the image is not in Cash it takes a few microseconds to load for the first time, after it has already loaded it no longer flashes in transition
– hugocsl