Efekt "przed i po" ze sliderem

Hej!

Tworzę stronę firmy uslugowej za pomocą kreatora webwave https://webwavecms.com/
Chciałbym na swojej stronie umieścić slidery before and after ze zdjęciami przed i po wykonaniu danej usługi. Kreator webwave nie posiada takiego elementu ale jest możliwość aby zamieścić element na podstawie kodu html/css/js. W internecie są tego typu widgety ale płatne. Poszukałem więc darmowych kodów i znalazlem taki przykład: https://codepen.io/dudleystorey/pen/DJqNKP

Wkleiłem kod 1:1 na swoją strone, jednak slider jest dużo węższy niż powinien być, w zasadzie widać tylko jego lewy fragment:
Tutaj zrobiłem to testowo na pustej stronie https://oczbtr.webwave.dev/ i efekt ten sam. Co powinienem zmienić aby widzieć wlaściwy finalny efekt?
Będę wdzieczny za podpowiedź od ekspertów, sam czuje się jak dziecko we mgle :)

mickey_rourke napisał(a):

Hej!

Tworzę stronę firmy uslugowej za pomocą kreatora webwave https://webwavecms.com/
Chciałbym na swojej stronie umieścić slidery before and after ze zdjęciami przed i po wykonaniu danej usługi. Kreator webwave nie posiada takiego elementu ale jest możliwość aby zamieścić element na podstawie kodu html/css/js. W internecie są tego typu widgety ale płatne. Poszukałem więc darmowych kodów i znalazlem taki przykład: https://codepen.io/dudleystorey/pen/DJqNKP

Wkleiłem kod 1:1 na swoją strone, jednak slider jest dużo węższy niż powinien być, w zasadzie widać tylko jego lewy fragment:
Tutaj zrobiłem to testowo na pustej stronie https://oczbtr.webwave.dev/ i efekt ten sam. Co powinienem zmienić aby widzieć wlaściwy finalny efekt?
Będę wdzieczny za podpowiedź od ekspertów, sam czuje się jak dziecko we mgle :)

Na swojej stronie wsadziłeś go do kontenera który ma szerokość 150px, więc Twój komponent się nie mieści.

Riddle napisał(a):

mickey_rourke napisał(a):

Hej!

Tworzę stronę firmy uslugowej za pomocą kreatora webwave https://webwavecms.com/
Chciałbym na swojej stronie umieścić slidery before and after ze zdjęciami przed i po wykonaniu danej usługi. Kreator webwave nie posiada takiego elementu ale jest możliwość aby zamieścić element na podstawie kodu html/css/js. W internecie są tego typu widgety ale płatne. Poszukałem więc darmowych kodów i znalazlem taki przykład: https://codepen.io/dudleystorey/pen/DJqNKP

Wkleiłem kod 1:1 na swoją strone, jednak slider jest dużo węższy niż powinien być, w zasadzie widać tylko jego lewy fragment:
Tutaj zrobiłem to testowo na pustej stronie https://oczbtr.webwave.dev/ i efekt ten sam. Co powinienem zmienić aby widzieć wlaściwy finalny efekt?
Będę wdzieczny za podpowiedź od ekspertów, sam czuje się jak dziecko we mgle :)

Na swojej stronie wsadziłeś go do kontenera który ma szerokość 150px, więc Twój komponent się nie mieści.

No tak, coz tego, że kod okej jak wstawiłem go do mikro konternera.
Dzięki wielkie za pomoc!

No tak, coz tego, że kod okej jak wstawiłem go do mikro konternera.
Dzięki wielkie za pomoc!

Działa u Ciebie? Bo u mnie w konsoli na Twojej stronie pojawia się błąd Uncaught ReferenceError: moveDivisor is not defined. Z tego, co widzę funkcja jest zdefiniowana, ale dopiero po tym, jak zostaje przypisana inputowi.

Gouda105 napisał(a):

No tak, coz tego, że kod okej jak wstawiłem go do mikro konternera.
Dzięki wielkie za pomoc!

Działa u Ciebie? Bo u mnie w konsoli na Twojej stronie pojawia się błąd Uncaught ReferenceError: moveDivisor is not defined. Z tego, co widzę funkcja jest zdefiniowana, ale dopiero po tym, jak zostaje przypisana inputowi.

Działa tak samo jak w przykładzie z codepen :)