[英]How the get scroll the div horizontal using left and right buttons
I have a class called portfolio-items where it will scroll horizontal. 我有一个名为portfolio-items的类,它将在水平滚动。 I need
jQuery
which helps me to scroll to the next and previous closest classes using my next and previous buttons. 我需要
jQuery
,这可以帮助我使用我的下一个和前一个按钮滚动到下一个和上一个最近的类。 Need it more specific like on click my buttons it need the get the position of my closest div and scroll accordingly left or right. 需要它更具体,如点击我的按钮,它需要获得我最近的div的位置,并相应向左或向右滚动。
Below Is my code 下面是我的代码
MARKUP MARKUP
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='offer-pg'>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
</div>
</div>
CSS CSS
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.offer-pg{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.offer-pg > .portfolio-item{
width: 100px;
background-color:blue;
margin-left:10px;
float:left;
}
Please check my fiddle DEMO 请检查我的小提琴演示
Thanks. 谢谢。
try 尝试
$(document).ready(function(){
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+100});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+100});
});
});
demo http://jsfiddle.net/xQh5J/177/ 演示http://jsfiddle.net/xQh5J/177/
exactly you can detect width one item by : 你可以通过以下方式检测宽度:
var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
And edit code 并编辑代码
$(document).ready(function(){
var widthOneItem = parseInt($(".col-md-3").first().css("width"))+parseInt($(".col-md-3").first().css("margin-left"))+parseInt($(".col-md-3").first().css("margin-right"))+parseInt($(".col-md-3").first().css("padding-left"))+parseInt($(".col-md-3").first().css("padding-right"));
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+widthOneItem});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+widthOneItem});
});
});
demo http://jsfiddle.net/xQh5J/180/ 演示http://jsfiddle.net/xQh5J/180/
I wrote a few lines and forked your fiddle: http://jsfiddle.net/jbrosi/c6kf2/ (I also accidentally updated yours - sorry for that). 我写了几行并分叉你的小提琴: http : //jsfiddle.net/jbrosi/c6kf2/ (我也不小心更新了你的 - 对不起)。
This solution won't break if you manually scroll via mousewheel or keyboard in the container and it should respect items with varying sizes, too (just make sure your container is big enough for them to stay in one line). 如果您通过容器中的鼠标滚轮或键盘手动滚动,此解决方案不会中断,它也应该尊重不同大小的项目(只需确保您的容器足够大,以便它们保持在一行中)。
$(document).ready(function() {
//cache our items and containers
var items = $(".portfolio-item");
var scrollContainer = $(".offer-pg-cont");
/**
* Fetches the next or previous item from items
*
* @param conntainer {JQueryElement} scroll-container in which the items can be found
* @param items {Array} items to be searched through
* @param isNext {boolean} set to true (default) if you want the next item, to false if you want the previous one
* @returns {*}
*/
function fetchItem(container, items, isNext) {
var i,
scrollLeft = container.scrollLeft();
//set isNext default to true if not set
if (isNext === undefined) {
isNext = true;
}
if (isNext && container[0].scrollWidth - container.scrollLeft() <= container.outerWidth()) {
//we reached the last one so return the first one for looping:
return $(items[0]);
}
//loop through items
for (i = 0; i < items.length; i++) {
if (isNext && $(items[i]).position().left > 0) {
//this item is our next item as it's the first one with non-negative "left" position
return $(items[i]);
} else if (!isNext && $(items[i]).position().left >= 0) {
//this is our previous item as it's the one with the smallest negative "left" position
//if we're at item 0 just return the last item instead for looping
return i == 0 ? $(items[items.length - 1]) : $(items[i-1]);
}
}
//nothing found
return null;
}
/**
* Moves the scrollcontainer to the next/previous item (depending on event.data.direction).
*
* @param event
*/
function moveToItem(event) {
//fetch the next/previous item:
var isNext = event.data.direction == "next";
var item = isNext ? fetchItem(scrollContainer, items, true) : fetchItem(scrollContainer, items, false);
if (item) {
//scroll to item
scrollContainer.animate({"scrollLeft": item.position().left + scrollContainer.scrollLeft()}, 400);
}
}
//bind events
$(".arrow-left").click({direction: "prev"}, moveToItem);
$(".arrow-right").click({direction: "next"}, moveToItem);
});
Update : Edited the code so it loops when reaching first / last item 更新 :编辑代码,使其在到达第一个/最后一个项目时循环
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.