Responsywny slider

Jupraw

2015-03-08 08:50

Jeżeli ktoś chce uzyskać responsywny slider (w oryginalnym szablonie nie jest) należy dodać w /* HEADER WITH SLIDER */:

.quick-slider-slide > img{max-width:100%;}

» Quick.Cms v6.x

marcinxl

2017-12-16 13:07

Działa slider jest responsywny. Pytanie jednak jak zrobić responsywne także animacje które mamy dodane do slidera?

szymaniukjerzy

2017-12-16 18:03

O jakich animacjach piszesz? Chyba, że masz wersję płatną - Quick.Cms.Exe, ale to forum dla free.
W wersji darmowej możliwe są tylko napisy, które można ustawiać poprzez wiersz styli:

.quick-slider-slide .description{z-index:3;position:absolute;top:10px;left:80px;width:35%;min-width:150px;margin-top:10px;padding:10px;background:rgba(0,0,0,0.3);line-height:1.25em;color:white;}

Potem możesz zmieniać - w zależności od szerokości responsywnych - np:

@media screen and (max-width:700px){
.quick-slider-slide .description{width:65%;font-size:0.875em;}
}

itd. itp.

Jerzy

marcinxl

2017-12-16 22:18

Tak mam wersję ext

orunia

2018-03-07 14:56

Offtop
Czy znacie szablony w których pojedyncze slider-y są różne dla różnych podstron. W wersji 5.1 mogłem zmieniać schematy dla każdej strony, a w 6.5 podstawowa wersja ma jeden schemat.

Marcin

selekcjoner

2018-03-07 15:35

Edytuj stronę => zakładka: ZAAWANSOWANE => Szablony

http://opensolution.org/docs/?p=pl-settings#themes

euphoria-art

2018-03-21 17:39

Jupraw wszystko pięknie działa ale tekst nałożony na slider na małych urządzeniach zaczyna być obcinany, tak jak na foto - https://images81.fotosik.pl/1023/639c2a9d6390efd9.jpg
Za groma nie mogę ustawić marginesów jak i wielkości czcionki, na nowo przepisuje linie z moimi marginesami i wielkością czcionki dla np. 480px i nie wiem czemu nie chce zatrybić.

szymaniukjerzy

2018-03-21 18:46

Odpowiada za to:
.quick-slider-slide .description{z-index:3;position:absolute;top:10px;left:80px;width:35%;min-width:150px;margin-top:10px;padding:10px;background:rgba(0,0,0,0.3);line-height:1.25em;color:white;}

W powyższym, już na początku, możesz sobie ustawić odpowiednie wartości: top:10px;left:80px;width:35%;min-width:150px;margin-top:10px;padding:10px;
Spróbuj np. nadać: width:75%;min-width:650px;
Możesz dodać tam też inną wielkość czcionki, np,: font-size:1.4em;

Dla mniejszych rozdzielczości ustaw np.:
@media screen and (max-width:800px){
.quick-slider-slide .description{width:55%;min-width:350px; font-size:1.2em;}
}

@media screen and (max-width:480px){
.quick-slider-slide .description{min-width:150px; font-size:0.8em;}
}

To są tylko przykłady. Testuj.

Jerzy

euphoria-art

2018-03-21 21:03

Tak cały czas w tej linii kombinuje, nic nie działa co chce ustawić:
chce poszerzyć rozjaśnione pole polikwidować marginesy i nic się nie dzieje, ustawiając np:
top:0px;left:0px;width:40%;margin-top:0px;padding:0px;
dosłownie zero reakcji.

euphoria-art

2018-03-22 15:53

Jeszcze jedna ważna sprawa: ustawiając responsywny slider poleceniem: .quick-slider-slide > img{max-width:100%;} czy np wykluczając go przy np. szerokości 480 px komendą: #slider-1 img{display:none;} prędkość na urządzeniach mobilnych w https://developers.google.com/speed/pagespeed/insights/ spada z 94 do 65. Może mi ktoś wytłumaczyć dlaczego tak się dzieję?

pawgraf

2018-03-22 22:24

Możliwe, że google interpretuje display none jako niepotrzebne grafiki i do tego ukryte.

Paweł

euphoria-art

2018-03-27 16:42

No dobra, a czy da się jakoś ustawić responsywnie ten slider aby nie spadła prędkość w pagespeed, 20 punktów w dół to trochę za bogato.

euphoria-art

2018-04-01 21:44

Trochę zabawy było aby osiągnąć ponad 90%. Poradziłem sobie sam, dzięki za jakąkolwiek pomoc, obecnie temat jest do zamknięcia.
A propos punktacji w https://developers.google.com/speed/pagespeed/insights/ - jest to obecnie brane pod uwagę przez Google w pozycjonowaniu strony, po dostosowaniu jej wg wytycznych Google Page Speed (z punktacji 65 na 93) moja strona po kliku dniach z pozycji TOP2 wskoczyła stabilnie na listę pierwszych pozycji czyli TOP1!

Joanna_SEVEN

2018-04-12 21:25

Czy mogłabym prosić o pomoc/ podpowiedź czy jest możliwość by w mniejszych rozdzielczościach (tablety telefony) można było by zrobić tak by centrum zdjęcia slidera pozostawało zawsze na środku?

Wtedy przycinałoby prawą i lewą stronę równo i bez zmian wysokości zdjęcia.

Joanna

szymaniukjerzy

2018-04-13 07:16

W pliku templates/default/style.css (lub innej domyślnej skórce jeżeli nie jest to default wstaw):

.quick-slider-slide > img{max-width:100%;}

Jerzy

Joanna_SEVEN

2018-04-13 08:42

szymniukjerzy dzięki za odpowiedź ale nie o to mi chodzi chciałabym by obrazek był responsywny nie stateczny tak by przycinało prawą i lewą stronę równo i bez zmian wysokości zdjęcia

w tej wersji cały img slidera jest zawsze widoczny a tego nie chcę

chciałabym by nadal zajmował całą wysokość ekranu (w przybliżeniu)

bez tej komendy zajmuje ją na stacjonarnym komputerze ale na lapku i mniejszych nośnikach już przycina prawą stronę zdjęcia a środek zdjęcia już nie jest na środku (ale zajmuje cały ekran na czym mi zależy).

Joanna

Joanna_SEVEN

2018-04-14 18:08

mmm czyli się nie da?

Joanna

euphoria-art

2018-04-14 22:33

Jak zmienisz w .quick-slider-slide "text align: left" na "text align: center" to będziesz mieć slider jak i text centralnie na środku, nic to pewnie nie zmieni bo i tak zawsze z prawej będzie obcinany slider, na pewno jakiś rozwiązanie jest, nie ma rzeczy niemożliwych, chętnie bym też się dowiedział jak uzyskać taki efekt ;)

Roni

2018-04-16 07:18

To jest możliwe poprzez ustawienie text-indent: -50%; dla .quick-slider-slide
Przy czym takie ustawienie powoduje też przesuwanie opisu, więc jeśli go używasz też musiałbyś go centrować, żeby nie był poza kadrem.