Question

我要在菜单宽度大于视口宽度时在滑块上转换菜单。

请不要使用任何第三方插件，只需对任务使用查询即可。确保当您到达菜单末尾时，它停止前进，并且下一个btn被禁用，上一个功能也相同。

在这里我添加了我的html，css和jquery可以检查一下

	jQuery(document).ready(function($) {
		var totalwidth=0;
		$('ul li').each(function(index, el) {
			var liwidth= $(this).outerWidth();
			$(this).css('width', liwidth);
			totalwidth = liwidth + totalwidth ;
			$('ul').css('width', totalwidth);
		});

		var viewwidth = $('.scroll-wrapper').width();
		var navwidth = $('.nav-tabs').width();
		var remainwidth= navwidth - viewwidth;
		var slideval=0;
		

		
		$('.next').on('click',function(){
			if(navwidth >= viewwidth){
				$('.nav').css('transition', '300ms all ease-in-out');
				slideval= viewwidth+slideval;
				var remainslide=remainwidth - slideval;
				$('.nav').css('right',slideval );
			}
		});

		$('.prev').on('click',function(){
				$('.nav').css('transition', '300ms all');
				slideval= viewwidth+slideval;
				$('.nav').css('right',-slideval );
		});
		
	});

.scroll-wrapper {
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.nav.nav-tabs {
	background: transparent none repeat scroll 0 0;
	position: relative;
	white-space: nowrap;
	z-index: 1;
	padding:0;
	/*transition: 0.3s all;*/
}
.nav.nav-tabs > li {
	display: inline-block;
	float: none;
	padding: 10px;
}
.next,.prev {
	position: absolute;
	top: 0;
	color: red;
	width: 50px;
	height: 17px;
	font-size: 20px;
	right:0;
	cursor: pointer;
	z-index: 99;
}
.prev{
	left:0;
	right:unset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-wrapper">
		<ul class="nav nav-tabs"> 
			<li>Shenika Joyal</li>
			<li>Courtney Kingrey</li>
			<li>Donte Magnani bfghfghfghfghfgh</li>
			<li>Tashia Zalenski</li>
			<li>Roxy Cocuzzo</li>
			<li>Rosanna Nette</li>
			<li>Margret Sidhom</li>
			<li>Nena Orsak</li>
			<li>Cassey Yow</li>
			<li>Rachele Gladu</li>
			<li>Dalton Bartash</li>
		</ul>
		<div class="arrow">
			<div class="prev">prev</div>
			<div class="next">next</div>
		</div>
	</div>

.scroll-wrapper {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.nav.nav-tabs {
  background: transparent none repeat scroll 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 1;
  padding: 0;
  /*transition: 0.3s all;*/
}

.nav.nav-tabs>li {
  display: inline-block;
  float: none;
  padding: 10px;
}

.next,
.prev {
  position: absolute;
  top: 0;
  color: red;
  width: 50px;
  height: 17px;
  font-size: 20px;
  right: 0;
  cursor: pointer;
  z-index: 99;
}

.prev {
  left: 0;
  right: unset;
}

<div class="scroll-wrapper">
  <ul class="nav nav-tabs">
    <li>Shenika Joyal</li>
    <li>Courtney Kingrey</li>
    <li>Donte Magnani bfghfghfghfghfgh</li>
    <li>Tashia Zalenski</li>
    <li>Roxy Cocuzzo</li>
    <li>Rosanna Nette</li>
    <li>Margret Sidhom</li>
    <li>Nena Orsak</li>
    <li>Cassey Yow</li>
    <li>Rachele Gladu</li>
    <li>Dalton Bartash</li>
  </ul>
  <div class="arrow">
    <div class="prev">prev</div>
    <div class="next">next</div>
  </div>
</div>

Answer 1

是的...使用滑动滑块实现了

git clone https://github.com/jpoon/kubernetes-udp.git

cd kubernetes-udp

kubectl create -f server.yaml

loggen --inet --dgram --size 300 --rate 10 --interval 10 <IPAddress of udp-server-service > 10001

kubectl logs udp-server-deployment-6f87f5c9-xxx (5 times)

jQuery(document).ready(function($) {
		  	var swiper = new Swiper('.swiper-container', {
	      slidesPerView: 4,
	      spaceBetween: 1,
	      navigation: {
        	nextEl: '.swiper-button-next',
        	prevEl: '.swiper-button-prev',
      		},
	      breakpoints: {
	        1024: {
	          slidesPerView: 4,
	          spaceBetween: 1,
	        },
	        768: {
	          slidesPerView: 3,
	          spaceBetween: 1,
	        },
	        640: {
	          slidesPerView: 2,
	          spaceBetween: 1,
	        },
	        320: {
	          slidesPerView: 1,
	          spaceBetween: 1,
	        }
	      }
	    });
	  });

.scroll-wrapper {
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.nav.nav-tabs {
	background: transparent none repeat scroll 0 0;
	position: relative;
	white-space: nowrap;
	z-index: 1;
	padding:0;
	/*transition: 0.3s all;*/
}
.nav.nav-tabs > li {
	display: inline-block;
	float: none;
	padding: 10px;
	text-align: center;
}

单击时在移动视图上滑动菜单

1 个答案: