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

问题描述 投票:-2回答:1

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

请不要使用任何第三方插件只需使用查询任务。确保当你到达菜单的末尾时它停止前进并且下一个btn被禁用,同样的功能也是prev。

在这里我添加了我的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>
jquery html css
1个回答
0
投票

Yesss ...使用swiper滑块实现了这一点

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;
}
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://idangero.us/swiper/dist/css/swiper.min.css">
<div class="scroll-wrapper swiper-container">
		<ul class="nav nav-tabs swiper-wrapper"> 
			<li class="swiper-slide"><a data-toggle="tab" href="#home" class="active">Natashia</a></li>
			<li class="swiper-slide"><a data-toggle="tab" href="#menu1">Daphne</a></li>
			<li class="swiper-slide"><a data-toggle="tab" href="#menu2">Brenton</a></li>
			<li class="swiper-slide"><a data-toggle="tab" href="#menu3">Gala</a></li>
			<li class="swiper-slide"><a data-toggle="tab" href="#menu4">Christen</a></li>
			<li class="swiper-slide"><a data-toggle="tab" href="#menu5">Howard</a></li>
			<li class="swiper-slide"><a data-toggle="tab" href="#menu6">Casey</a></li>
		</ul>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

	<div class="tab-content">
	  <div id="home" class="tab-pane fade in active">
	    <h3>HOME</h3>
	    <p>Some content.</p>
	  </div>
	  <div id="menu1" class="tab-pane fade">
	    <h3>Menu 1</h3>
	    <p>Some content in menu 1.</p>
	  </div>
	  <div id="menu2" class="tab-pane fade">
	    <h3>Menu 2</h3>
	    <p>Some content in menu 2.</p>
	  </div>
	  <div id="menu3" class="tab-pane fade">
	    <h3>Menu 2</h3>
	    <p>Some content in menu 2.</p>
	  </div>
	  <div id="menu4" class="tab-pane fade">
	    <h3>Menu 2</h3>
	    <p>Some content in menu 2.</p>
	  </div>
	  <div id="menu5" class="tab-pane fade">
	    <h3>Menu 2</h3>
	    <p>Some content in menu 2.</p>
	  </div>
	  <div id="menu6" class="tab-pane fade">
	    <h3>Menu 2</h3>
	    <p>Some content in menu 2.</p>
	  </div>
	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.