如何在Flexbox滑块中正确显示乘法图像？

时间：2019-04-05 10:11:02

标签： html css flexbox

您好，我有flexbox滑块，其中1张图片填充了this之类的所有空间，并且想知道如何将所有不同的图片放置在此处，它们确实有，但是显示错误，必须像{{3 }} 我如何思考flex:1 0 100%;中的问题，但我不知道如何使该滑块像this

此代码this 

(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>

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

1 个答案:

答案 0 :(得分：0)

我为您提供的建议由您自己决定，主要问题是，在flex 1 0 100%;中，我将其删除了，并添加到父项中display flex；还有一个问题是，图像不正确，图像没有正确的宽度和高度，这意味着单击导航按钮时图像会弹跳，只需尝试添加宽度和高度大于300 px的图像，它将变得很好。 / p>

要观看示例，请更好地使用此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>

相关问题
最新问题