Pokaz slajdów - zmiana strzałek oraz przewijanie strony w dół

Question

Witam.

Mam przesuwające się automatycznie obrazki jako pokaz slajdów.

Tu jest mój kod na CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx

Tu jest ten sam pokaz slajdów:
https://www.jqueryscript.net/demo/mobile-json-carousel/

Na powyższej stronie internetowej z tym pokazem slajdów nie podoba mi się strzałka w lewo (łącznie z niebieskim okrągłym tłem) oraz strzałka w prawo (łącznie z czerwonym okrągłym tłem).
Na tym moim kodzie zamiast lewej strzałki mam wpisane "previous" oraz zamiast prawej strzałki mam wpisane "next".
Jeżeli scroll myszki jest przewinięty standardowo w górę na tym moim kodzie, to przyciski "previous" oraz "next" - działają prawidłowo.
Jeżeli scroll myszki przewinę trochę w dół na tym moim kodzie, to na dole po środku obrazków jest 6 kropek. Po wciśnięciu poszczególnej kropki, można przejść, np. z obrazka nr 2 do obrazka nr 5 itd itd - to także działa prawidłowo.

Niestety, jeżeli scroll myszki przewinę bardziej w dół (brak widocznego niebieskiego tła na górze), to przyciski "previous" oraz "next" - nie działają. Dodatkowo te kropki na dole także nie działają po wciśnięciu.

Tu jest inny pokaz slajdów z normalnymi strzałkami:
https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/

Chciałbym mieć w moim kodzie wprowadzone dwie poprawki:

1. Czy można umieścić te normalne strzałki (z innego pokazu slajdów) w moim kodzie w miejsce tamtych jakie mi się nie podobają ?

2. Czy można zrobić tak, aby te normalne strzałki oraz te kropki na dole działały prawidłowo, jeżeli scroll myszki przewinę bardziej w dół ?

Będę bardzo wdzięczny za skuteczną i fachową pomoc.

Answer 1

usuń     

stickyNav();

$(window).scroll(function() {
stickyNav();
});

które jest odpowiedzialne za dodawanie klasy , która nie umożliwia kliknięcie w te przyciski po przeskrolowaniu strony.

 

Odnośnie strzałek to jasne , że można podmienić np. na fontawesome masz gotowe fonty w kształcie strzałek i po prostu musisz podmienić w odpowiednim miejscu(nie zapomnij o klasach, być może w jsie są użyte aby nadać funkcjonalności).

Comments

Usunąłem z JS:

stickyNav();

$(window).scroll(function() {
	stickyNav();
});

Po usunięciu tego powyższego zapisu w JS, jeżeli scroll myszki przewinę bardziej w dół, to przyciski previous/next oraz te kropki na dole - wreszcie działają po wciśnięciu.

Niestety zawartość poziomego MENU (fioletowe tło) nie przylega do samej góry, czyli znika. Chciałbym, żeby to MENU po przeskrolowaniu strony - przylegało zawsze do samej góry.

Szkoda, że nie przetestowałeś tego swojego patentu (usunięcie tamtego powyższego zapisu w JS), tylko napisałeś w ciemno co mam zrobić.

---

Masz racje , napisałem w ciemno. Twój problem polega na tym , że dodajesz klasę sticky do menu , które zawiera z-index 101 oraz pozycjonujesz to na fixed , ten element zawiera 100vh , i tym samym przysłania całą resztę elementów. Tym samym nie działa cursor i nie wykrywa eventów na tym przyciskach itp. Aby rozwiązać ten problem musisz dodać wyższy z-index , w tym wypadku 101 dla przycisków oraz dotsów , w twoim wypadku dla .slider_list_wrapper, .prev_btn,.next_btn. Jednak lepszym rozwiązaniem będzie po prostu dla tego sticky menu określić wysokość , tym samym nie musisz zmieniać z-indexów , i w przyszłości jak coś innego się pojawi na stronie to przyklejone menu nie będzie tego przysłaniąc. Czyli dla klasy .sticky musisz określić wysokość np. 50px

 

Generalnie najłatwiej będzie klasę sticky dodać dla .menu

oraz w css dla .menu dodaj

display: flex;

justify-content: center;

align-items: center;

background-color: #660066;

 height: 50px;

 

       if (ScrollY > NavY) {

            $('.menu').addClass('sticky');

        } else {

            $('.menu').removeClass('sticky');

        }