Witam,
mam problem z dostosowaniem slidera bootstrapowego (a właściwie sposobu skalowania) do moich potrzeb.
Ogólny plan:
- Szerokość slidera 100% (max 1920px, potem wycentrowany) - zrobione
- Między 1920px a 1321px ma się nie skalować tylko kadrować w poziomie - zrobione
- Od 1320px (włącznie) chciałbym aby slider zaczął się standardowo skalować ale zaczynając od miejsca gdzie skończył się kadrować w wyższych rozdzielczościach (czyli ze ścietymi bokami).
Ogólnie jeśli chodzi o CSS to na pewno orłem nie jestem (pracuję jako backend dev, z frontem mam bardzo mało wspólnego) więc bardzo bym prosił o pomoc. Poniżej aktualny kod:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="{{ url('/img/slide1.jpg') }}">
</div>
<div class="item">
<img src="{{ url('/img/slide1.jpg') }}">
</div>
</div>
</div>
.carousel.slide{
max-width: 1920px;
overflow: hidden;
}
.carousel-inner{
width: 1920px;
left: 50%;
margin-left: -910px;
}
Aktualnie jedyny pomysł jaki mi przychodzi do głowy to podmiana obrazka w sliderze przy zmniejszeniu rozdzielczości ekranu na już docięty do tej maksymalnej szerokości i wtedy normalne skalowanie ale to jest bardzo kiepskie rozwiązanie i jeśli się da to chciałbym go uniknąć.
Pozdrawiam i z góry dziękuję za pomoc