I am creating a responsive css jquery slider, this is the page slider example, I want to make one like this: https://www.artfactory.es/es .
I don't know how to make the first button of the slide that is linked to the HOME div active by default // solved with the active class
How to make the smooth scroll work well since with two links it works well but if I put a third or fourth these last two do not work well, how can I solve it?
I attach the html and jquery code
<div id="fullpage">
<div id="nav">
<!-- menu -->
<div class="menu">
MENU
</div>
<!-- fin del menu -->
</div>
<!-- fin del nav -->
<!-- nav_right -->
<div class="nav_right">
<ul>
<li><a href="#home"><span class="active"></span></a></li>
<li><a href="#nosotros"><span></span></a></li>
<li><a href="#trabajos"><span></span></a></li>
<li><a href="#trabajos2"><span></span></a></li>
</ul>
</div>
<!-- fin del nav_right -->
<!-- HOME -->
<div id="home">HOME
<div class="mouse"></div>
</div>
<!-- fin del HOME -->
<div id="nosotros">NOSOTROS
<div class="mouse"></div>
</div>
<!-- fin del NOSOTROS -->
<div id="trabajos">TRABAJOS
<div class="mouse"></div>
</div>
<!-- fin del NOSOTROS -->
<div id="trabajos2">MUNCA
<div class="mouse"></div>
</div>
<!-- fin del NOSOTROS -->
</div>
<!-- fin del fullpage -->
this is js
$('a[href^="#"]').click(function(event){
//Aquí elimina el evento normal de la etiqueta <a>
event.preventDefault();
//Aquí cojemos el elmento
var elem=$(this).attr("href");
$("html, body").animate({
scrollTop: $(elem).offset().top
},800);
});
});
You just have to add the "active" class to the initial button, in this way the javascript function already detects it as active since it is the only thing you do, add/remove the "active" class, adding it by default in the html you already achieve that.
<li><a class="active" href="#home"><span></span></a></li>
To achieve the transition you must add in the divs (Home, Us, Jobs) the css transition height property to tell it to make a height transition for a few seconds on the change.
transition: height 2s;
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
---- Edited to reply to comment -----
For that you have to control the scrol of the page in the following way without needing to have the class set in the html: