Мобильная версияЯ работаю над каруселью Slider Slicker, где карусель изображений отображается в нижней части области просмотра, а активное изображение, выбранное из карусели, отображается над ней. Я использую синхронизацию Slick Slider с https://kenwheeler.github.io/slick/
Мне бы хотелось, чтобы весь проект умещался в области просмотра, чтобы мне не приходилось прокручивать вверх или вниз для просмотра какого-либо содержимого. Это будет просматриваться на экранах разных размеров, поэтому я бы хотел, чтобы оно динамически масштабировалось. Если я изменю «slidesToShow: #» в javascript ниже, высота изображений в карусели изменится, и поэтому активное изображение должно масштабироваться вверх или вниз, чтобы заполнить оставшееся доступное пространство в области просмотра.
SlidesToShow = 3
SlidesToShow = 7
4161-15_WI HTML, тело { цвет фона: #7b6e6d; поле: 5 пикселей; высота: 100%; } .вершина { высота: авто; фон: #c0c0c0; } .нижний { высота: авто; } .карусель { высота: авто; } .slick-slide { маржа: авто; } .slick-slide img { ширина: 100%; граница: сплошная 3 пикселя #7b6e6d; } .wrapper .slick-dots li кнопка:before { размер шрифта: 20 пикселей; черный цвет; }
$('.slider-for').slick({ слайдыToShow: 1, слайдыToScroll: 1, стрелки: ложь, исчезать: правда, точки: ложь, скорость: 500, swipeToSlide: правда, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ слайдыToShow: 2, слайдыToScroll: 1, адаптивная высота: ложь, asNavFor: '.slider-for', точки: ложь, исчезать: ложь, бесконечный: ложный, проведите пальцем по экрану: правда, стрелки: ложь, центрмоде: правда, фокусонселект: правда }); Я пробовал использовать flex box и код, опубликованный другим пользователем на Stackoverflow. https://codepen.io/calsal/pen/bGdgyBX
Когда я пытаюсь вставить изображения вместо текстовых элементов, изображения масштабируются за пределы области просмотра.
