Как сделать адаптивный слайдер изображений? - PullRequest
Новая
       8

Как сделать адаптивный слайдер изображений?

0 голосов
/ 24 апреля 2020

У меня есть маленький слайдер на JQuery.

HTML: 

<div class="slider">
  <div>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
  <a class="prev"></a>
  <a class="next"></a>
</div>

CSS: 

.slider {
  float: right;
  max-width: 712px;
  max-height: 423px;
  overflow: hidden;
  position: relative;
}
.slider div {
  position:relative;
  width: 10000px;
  height: 424px;
}
.slider div img {
  float: left;
  display: block;
  width: 100%;
  max-width: 712px;
}

На рабочем столе все хорошо, потому что изображения растягиваются по ширине до 712 пикселей. Но на мобильных устройствах мне нужно растянуть изображения до ширины блока с помощью id = slider

Но изображения находятся внутри блока div с шириной 10000 пикселей - они растягиваются до 712 пикселей. Как убедиться, что изображения внутри div div растягиваются до 100% родительского div с id = slider?

1 Ответ

1 голос
/ 24 апреля 2020

Исправления:

  • не использовать float: оставлено в .slider
  • использовать ширину в vw для небольшого экрана в медиа для изображений
  • поймать 

window.sldrcnt = 0;
function slider(direct) {
    if (direct == 'prev') {
    	if (window.sldrcnt != 0)
    		window.sldrcnt = window.sldrcnt + 1;
    } else {
    	if ( Math.abs(window.sldrcnt - 1) == $('.slider div img').length )
    		window.sldrcnt = 0;
    	else
    		window.sldrcnt = window.sldrcnt - 1;
    }
	$('.slider div').animate({'marginLeft': window.sldrcnt * $('.slider div img').innerWidth()}, 600);
}
.slider {
  /*float: right;*/
  max-width: 712px;
  max-height: 423px;
  overflow: hidden;
  position: relative;
}
.slider div {
  position:relative;
  width: 10000px;
  height: 424px;
}
.slider div img {
  float: left;
  display: block;
  width: 100%;
  max-width: calc(100vw - 0px); /* instead 0 use the total space if  used both left & right  */
}
.slider .prev, .slider .next {
  position: absolute;
  top: 50%;
}
.slider .next {
  right: 20px;
}
.slider .prev {
  left: 20px;
}
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
<div class="slider">
  <div>
    <img src="https://dummyimage.com/712x423/a155a1/fff">
    <img src="https://dummyimage.com/712x423/6da155/fff">
    <img src="https://dummyimage.com/712x423/c93a63/fff">
  </div>
  <a class="prev" href="javascript:slider('prev');void(0);">prev</a>
  <a class="next" href="javascript:slider('next');void(0);">next</a>
</div>
</body>
</html>
...