Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Slider a rozdzielczość ekranu

Konfiguracja  Założony przez  _xmg.

Adres forum:
http://simpletruck.pl/index.php


Wersja silnika:
1.8.14


Opis problemu:
Według pewnego poradnika z forum stworzyłem slider. Obrazki w nim mają rozdzielczość 1090x180.
Zrobiłem to tak, żeby slider przystosowywał się do rozdzielczości ekranu. 

Jaki jest problem? Gdy rozdzielczość ekranu (szerokość) jest większa niż szerokość obrazka, do tego obrazka dodawane jest białe "coś". Na laptopie to występuje, ale na telefonie tego nie ma. Jak tego uniknąć? Żeby np. pomimo większej rozdzielczości ten obrazek nie "rozszerzał się" a tylko wyśrodkowywał? Mam nadzieję, że rozumiecie.

   
Kiepskie, lecz działające rozwiązanie:
#slider {background: transparent!important;}

Druga opcja:
Edycja kodu slidera i dodanie background-size: cover; tam gdzie dodawane jest tło obecnie.

Opcji jest tak naprawdę kilka, te dwie są najbardziej proste. Obydwie dadzą troszkę inny efekt Pierwsza opcja - zniknie białe tło. Druga - tło (obrazek w sliderze) będzie zajmował cały obszar.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Wybrałem drugą opcję. Mój kod wygląda tak:

#slider {
    position:relative;
    margin:0 auto; /*center-aligned*/
    transform: translate3d(0,0,0);
    box-shadow: 0px 1px 5px #999999;
    background-size:cover;
}
ale jedyne co to zniknęło białe tło
Nie możesz tego dodać tak. Musisz bezpośrednio tam gdzie nadawany jest background. Będzie to zapewne gdzieś w plikach js, nie mam jak teraz sprawdzić.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
@Divir Chodzi o jakiś konkretny js? Czy ten, który został dodany wraz z tym sliderem?
Bo ten używany w sliderze wygląda tak: https://pastebin.com/d1VMwK3M

Dla jasności korzystałem z tego: https://webboard.pl/thread-69465.html
Mozesz sprobowac dodac to background-size: cover; po tym:
M[c][B]='url("'+b.e[h]("src")+'") no-repeat

Ewentualnie uzyc innego slidera/znalezc oryginalny kod tego (bez zadnych minifikacji). Z tym szkoda sie bawic, edycja go na dłuższą mete to katorga.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
@Divir niestety, nie dało. Czy możesz polecić jakieś proste slidery?
Zależy czego potrzebujesz. Przypuszczam, że nawet ten co wyskakuje po wpisaniu "css only slider" ci wystarczy. Poza tym coś typu "aparat" lub "aparad" był spoko, nie pamiętam. Musiałbyś pod takimi hasłami szukać w google.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.



Użytkownicy przeglądający ten wątek:

1 gości