Как сделать разный foreach в laravel в зависимости от размера экрана?

Question

[miniven]

Есть слайдер. В каждом слайде по 6 карточек. Реализовано вот так:

@foreach($slider->chunk(6) as $slider_chunk)
				<div class="swiper-slide examples__slide">

					@foreach($slider_chunk as $slide)
					<div class="col-md-4">
						<a href="#" id="objects-open" class="object pop-up-open">
							<div class="object__overlay">
								<img src="{{ $slide->img_path }}" alt="">
							</div>
							<div class="object__info">
								<h4 class="object__title">{{ $slide->title }}</h4>
								<span class="object__location">{{ $slide->location }}</span>
							</div>
							<span class="object__price">{{ $slide->price }} &#8364;</span>
						</a>
					</div>
					@endforeach

				</div>
				@endforeach

Мне же нужно, чтобы на мобильной версии в каждом слайде было по одной карточке, а не по 6, как в десктопной.
Как это можно сделать?

Answer 1

[Alexander]

Это не на бэкенде делают.

Comments

[miniven]

И тем не менее, как? :)

[D']

miniven: для особо непонятливых еще раз: это делают не на бекенде. Это делается средствами CSS.

[Сергей]

miniven: css, js, есть скрипты адаптивных слайдеров типа owlCarousel

[miniven]

D' Normalization: я и жду, пока мне помогут сделать это средствами css, если не на бекенде. Так как?

[Alexander]

miniven: css,js

Answer 2

[Михаил]

stackoverflow.com/questions/23779088/laravel-detec...

Answer 3

[Максим Тимофеев]

Вот так это работает:
запрос на сервер -> сервер обрабатывает запрос (тут ваш foreach) -> ответ браузеру в виде html (вот тут можно средствами css получить размер браузера)
А Вы спрашиваете как вернуться во времени назад? Никак.
У Вас подход не правильный. Вам надо код кастомизировать не на сервере, а в браузере. Либо, как корявый вариант, создать 2 отображения, 1 сделать display:none; потом в браузере в зависимости от размера экрана менять видимость блоков.
Можно на сервере в настройках сервера определять например мобильный девавйс и делать редирект на мобильный поддомен, потом настроить маршрутизацию и два различных шаблона скармливать. Но учитывая Ваш вопрос - даже не пытайтесь. Для начала надо понять как работают сайты.

Answer 4

[Vladimir S]

<div class="col-md-4"> попробовать заменить на что-то типа <div class="col-xs-12 col-sm-6 col-md-4">