Webboard

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.

[attachment=13867]

Kiepskie, lecz działające rozwiązanie:

Kod:
#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.

Wybrałem drugą opcję. Mój kod wygląda tak:

Kod:
#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ć.

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:

Kod:
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.

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.

_xmg

Divir

_xmg

Divir

_xmg

Divir

_xmg

Divir