Propozycja
do css-a dodaj
.panel {
position: absolute;
opacity: 0;
transition: opacity 1s;
}
[ edit ]
do js-a
// to co już masz od początku napisane
var element = document.getElementById('mobile_control');
. . .
}
var planet = ["Strona główna", "Strona 7", "Strona 6","Strona 5", "Strona 4", "Strona 3", "Strona 2", "Strona 1"];
// od tego miejsca włącznie zostaje
const planets = document.querySelectorAll('.moon');
// a to
var moon_id = 0;
function moon(direction){
var n_planet = 8, moon_next;
if(direction == "prev"){
moon_next = (moon_id + 1) % n_planet;
moon_id++;
} else {
if(moon_id == 0){
moon_next = 7;
moon_id = 7;
} else {
moon_next = moon_id - 1;
--moon_id;
}
};
planets.forEach( ( planet, i ) => {
if ( i === moon_next ) {
planet.style.visibility = 'visible';
console.log(moon_next);
} else {
planet.style.visibility = 'hidden';
}
} );
};
planets.forEach( ( planet, i ) => {
if ( i === 0 ) {
planet.style.visibility = 'visible';
} else {
planet.style.visibility = 'hidden';
}
} );
// Zamień na to
let moon_id = 0;
moon();
function moon(direction = null){
const n_planet = planets.length;
let moon_next;
if(direction == "prev"){
moon_next = ++moon_id % n_planet;
if(moon_id > 7) moon_next = moon_id = 0;
}else if(direction == "next"){
moon_next = --moon_id % n_planet;
if(moon_id < 0) moon_next = moon_id = 7;
}else{
moon_next = moon_id = 0;
}
showSlide(moon_next);
planets.forEach( (planet) => { planet.style.visibility = 'hidden'; });
planets[moon_next].style.visibility = 'visible';
}
function showSlide(id) {
const slides = ['index', 'seventh', 'sixth', 'm_vibn', 'fourth', 'three', 'second', 'first'];
slides.forEach( (slide) => { $("#" + slide).css("opacity", 0); });
$("#" + slides[id]).css("opacity", 1);
}