Przełączanie stron jako slajdów w JavaScript

Question

Cześć,

Poprzednie pytanie źle sformułowałem ale teraz żeby ułatwić zrozumienie o co mi chodzi udostępniam link do podglądu website.

https://codepen.io/xjafajx/pen/abJrrew

Po pierwsze:

• na stronie znajdują się strzałki w prawo i lewo które służą do poruszania się po menu. Pomiędzy strzałkami znajduje się grafika (kliknięcie w nią powoduje przejście do danej sekcji). Moje pytanie jak zrobić aby przechodzić do sekcji następnej klikając w prawą strzałkę lub przechodzić do sekcji poprzedniej klikając strzałkę w lewo?

Po drugie:

• Jak mogę zrobić tutaj przejście w stylu po slajdach? Czyli widoczna jest tylko ta sekcja na której się znajduję użytkownik reszta jest ukryta.

Bardzo proszę o pomoc i z góry dziękuję

Answer 1

Z Twojego opisu wynika, że potrzebujesz zwykłego slidera. A nawigację tego slidera zaprojektować tak jak to wygląda w Twoim przykładzie.

Answer 2

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);
}

 

Comments

Coś z tym prev nie działa

Jak kliknę next->prev->prev->next to już napisu nie ma co widzi id=8 a max jest 7 :(

Jak to naprawić?

---

@xjafajx, patrz powyżej, poprawione.  

---

Ok,

A jak w stopce mam takie jakby szybkie odnośniki do tych podstron to jak zrobić żeby po kliknięciu od razu mnie przeniosło na odpowiednia podstronę?

<ul class="list-unstyled">
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#index" data-translate-id="112">Index</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#first" data-translate-id="113">First</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#second" data-translate-id="114">Second</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#three" data-translate-id="115">Three</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#fourth" data-translate-id="116">Fourth</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#fifth" data-translate-id="117">Fifth</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#sixth" data-translate-id="118">Sixth</a>
						</li>
						<li>
							<span class="sk-footer-text font-weight-bold">&#174; </span><a class="sk-footer-text font-weight-bold" href="#seventh" data-translate-id="119">Seventh</a>
						</li>
					</ul>

Ten href mi nie działa znaczy się w linku dodaje na końcu etykietę ale nie przenosi mnie do podstrony...