当菜单宽度大于视口宽度时,我想在滑块上转换菜单。
请不要使用任何第三方插件只需使用查询任务。确保当你到达菜单的末尾时它停止前进并且下一个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>
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>