html - 如何在 flexbox slider 中正确显示多个图像？

标签 html css flexbox

你好，我有 flexbox slider ，1 个图像填充所有空间，如 this想知道如何在这里放置所有不同的图像，它们有，但显示错误，它必须像 this 我如何看待 flex:1 0 100%; 中的问题，但我不知道如何使此 slider 像 this

此代码 link to fiddle 

(function() {
  var carousel, next, prev, seats;

  carousel = $('.carousel');

  seats = $('.carousel-seat');

  next = function(el) {
    if (el.next().length > 0) {
      return el.next();
    } else {
      return seats.first();
    }
  };

  prev = function(el) {
    if (el.prev().length > 0) {
      return el.prev();
    } else {
      return seats.last();
    }
  };

  $('.toggle').on('click', function(e) {
    var el, i, j, new_seat, ref;
    el = $('.is-ref').removeClass('is-ref');
    if ($(e.currentTarget).data('toggle') === 'next') {
      new_seat = next(el);
      carousel.removeClass('is-reversing');
    } else {
      new_seat = prev(el);
      carousel.addClass('is-reversing');
    }
    new_seat.addClass('is-ref').css('order', 1);
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = next(new_seat).css('order', i);
    }
    carousel.removeClass('is-set');
    return setTimeout((function() {
      return carousel.addClass('is-set');
    }), 50);
  });

}).call(this);
* {
			box-sizing: border-box;
			padding: 0;
			margin: 0;
		}


body{background-color:#383838;}

.container{
    width: 1170px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    font-family: "Museo Cyrl 900";
}



.w100{
	width: 100%
}

.wrap {
	overflow: hidden;
  padding-top:100px;
}

.carousel {
	display: flex;
	left: -100%;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	transform: translateX(100%);
}


.carousel.is-set {
	transform: none;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);

}

.carousel-seat {
	
	flex: 1 0 100%;
	order: 2;
}

.wrap ul li{
	width: 190px;
	height: 115px;
	
}
.sh_l{
	width: 100%
}

.carousel-seat.is-ref {
	order: 1;
}


.controls {
	padding: 2em;
	text-align: center;
}

.controls button {
	background: #fff;
	border: 0;
	border-radius: 100%;
	width: 30px;
	height: 30px;
}

.controls button:hover, .controls button:focus {
	background: #dd5a15;
	outline: none;
	cursor: pointer;
	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--start of our partners-->
	<div class="our_partners">
		<div class="container">
			<div class="our_pr_title def_p w100">С кем мы работаем</div>
			<div class="slider_wrapper w100">
				<div class='wrap'>
					<ul class='carousel is-set'>
						<li class='carousel-seat is-ref'style="background: url(https://i.paste.pics/57YKD.png);">
						<a href="#" class="sh_l"></a></li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKQ.png);">
						</li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKD.png);">
						</li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKQ.png);">
						</li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKD.png);">
						</li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKD.png);">
						</li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKD.png);">
						</li>
						<li class='carousel-seat is-ref' style="background: url(https://i.paste.pics/57YKD.png);">
						</li>
					</ul>
				</div>
				<div class='controls'>
					<button class='toggle'></button>
					<button class='toggle' data-toggle='next'></button>
				</div>

			</div>
			<!-- /.partner_slider -->
			<div class="bt_titlle def_p w100">С кем мы работаем</div>
		</div>
		<!-- /.our_partners -->
	</div>

看起来您的帖子主要是代码；请添加更多详细信息。 看起来您的帖子主要是代码；请添加更多详细信息。

最佳答案

我给你的建议，你自己做，主要问题是，在 flex 1 0 100%; 我删除它，添加 display flex;还有问题是，该图像不正确，图像的宽度和高度不正确，这意味着单击导航按钮时该图像会跳动，只需尝试添加宽度和高度超过 300 像素的图像，就可以了。

要更好地观看示例，请使用此 link to fiddle 

(function() {
  var carousel, next, prev, seats;

  carousel = $('.carousel');

  seats = $('.carousel-seat');

  next = function(el) {
    if (el.next().length > 0) {
      return el.next();
    } else {
      return seats.first();
    }
  };

  prev = function(el) {
    if (el.prev().length > 0) {
      return el.prev();
    } else {
      return seats.last();
    }
  };

  $('.toggle').on('click', function(e) {
    var el, i, j, new_seat, ref;
    el = $('.is-ref').removeClass('is-ref');
    if ($(e.currentTarget).data('toggle') === 'next') {
      new_seat = next(el);
      carousel.removeClass('is-reversing');
    } else {
      new_seat = prev(el);
      carousel.addClass('is-reversing');
    }
    new_seat.addClass('is-ref').css('order', 1);
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = next(new_seat).css('order', i);
    }
    carousel.removeClass('is-set');
    return setTimeout((function() {
      return carousel.addClass('is-set');
    }), 50);
  });

}).call(this);
body{background-color:#383838;}

.container{
    width: 1170px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    font-family: "Museo Cyrl 900";
}
.wrap {
	overflow: hidden;
	display: flex;
}

.carousel {
	display:flex;
}

.carousel.is-set {
	transform: none;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);

}

.carousel-seat {
	width: 200px;
	order: 2;
}

.wrap ul li{
	width: 185px;
    height: 130px;
    margin-right: 10px;

	
}
.sh_l{
	width: 100%
}

.carousel-seat.is-ref {
	order: 1;
}


.controls {
	padding: 2em;
	text-align: center;
}

.controls button {
	background: #fff;
	border: 0;
	border-radius: 100%;
	width: 30px;
	height: 30px;
}

.controls button:hover, .controls button:focus {
	background: #dd5a15;
	outline: none;
	cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--start of our partners-->
	<div class="our_partners">
		<div class="container">
			<div class="our_pr_title def_p w100">С кем мы работаем</div>
			<div class="slider_wrapper w100">
				<div class='wrap'>
					<ul class='carousel is-set'>
						<li class='carousel-seat is-ref'style="background: url(http://www.baltana.com/files/wallpapers-8/Yellow-Forest-Background-Wallpaper-26004.png); background-size: cover;">
						<a href="#" class="sh_l"></a></li>
						<li class='carousel-seat is-ref' style="background: url(http://www.baltana.com/files/wallpapers-10/Magic-Forest-Tree-Wallpaper-28312.jpg); background-size: cover;">
						</li>
						<li class='carousel-seat is-ref' style="background: url(http://www.baltana.com/files/wallpapers-10/Tree-Roots-Magic-Forest-Wallpaper-28320.jpg); background-size: cover;">
						</li>
						<li class='carousel-seat is-ref' style="background: url(http://www.baltana.com/files/wallpapers-9/Forest-Lake-Desktop-Wallpaper-25667.jpg); background-size: cover;">
						</li>
						<li class='carousel-seat is-ref' style="background: url(http://www.baltana.com/files/wallpapers-10/Tree-Magic-Forest-Background-Wallpaper-28319.jpg); background-size: cover;">
						</li>
						<li class='carousel-seat is-ref' style="background: url(http://www.baltana.com/files/wallpapers-10/Roots-Tree-Glare-Magic-Forest-Wallpaper-28315.jpg); background-size: cover;">
						</li>
						
					</ul>
				</div>
				<div class='controls'>
					<button class='toggle'></button>
					<button class='toggle' data-toggle='next'></button>
				</div>

			</div>
			<!-- /.partner_slider -->
			<div class="bt_titlle def_p w100">С кем мы работаем</div>
		</div>
		<!-- /.our_partners -->
	</div>

关于html - 如何在 flexbox slider 中正确显示多个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55533089/

上一篇：css - Angular:group() 函数不会并行运行动画，会扰乱动画流

下一篇：css - Open Sans 在所有实时站点上显示为斜体，但在本地站点上不显示

相关文章：

javascript - 使用javascript更改第二个按钮的颜色

javascript - 添加第二个 'action' 以针对不同的 div 运行

HTML - 向表体添加滚动条？

html - 呈现小于宽度/高度指定的 Flex 元素

html - 我该怎么做才能单击 html 复选框并更改 html 输入的内容？

css - Internet Explorer 不支持我的最小高度 : 100% with flexbox

javascript - 使用 JQuery 检测两个旋转的 div 是否发生碰撞

html - 使用 cols/rows 或 style-width/height 来指定文本区域的尺寸？

javascript - 使用 JS 如何获取 div 的 flex-direction 属性的值？

html - CSS 粘性页脚不适用于/flexbox

©2024 IT工具网  联系我们