如何在移动视图中点击箭头时向左和向右滚动内容? [英] How to scroll the content in the left and right direction on hitting an arrow in mobile view?
问题描述
我有一个
对于你的问题你需要一些东西
- 设置两个按钮来设置代码中的监听器
-
获取初始位置,以便计算幻灯片
让divMain = $('。product-all-contents')[0];
让position = $(divMain).children()。position()。left;
const slideAmount = 150;
这3个变量将是代码的主要值
-
最后为幻灯片制作听众
$ ('#arrow-right')。click(function(){
$(divMain).animate({
scrollLeft:position + slideAmount
},500);
position + = slideAmount;
})
希望这会有所帮助:>
$(document).ready(function(){let divMain = $('。product-all-contents')[0]; let position = $( divMain).children()。position()。left; const slideAmount = 150; $('#arrow-right')。click(function(){$(divMain).animate({scrollLeft:position + slideAmount},500 ); position + = slideAmount;})$('#arrow-left')。click(function(){$(divM) ain).animate({scrollLeft:position - slideAmount},500); position - = slideAmount; })};
.product-all-contents { background-color:#f0f0f0;宽度:70%; margin:auto;}。product-contents {display:flex;辩解内容:空间 - 间隔; align-items:center; padding:1rem;}。product-contents .product {width:10%; text-align:center;身高:150px; padding-top:1%; padding-left:1%; padding-right:1%;边框式:坚固; border-width:3px; border-color:rgb(145,147,150);背景颜色:白色; border-radius:10px} .ipads {display:flex;辩解内容:空间 - 间隔; align-items:center; padding:1rem;}。tvs {display:flex;辩解内容:空间 - 间隔; align-items:center; padding:1rem;}。特许经营 - hub-text,.cloud-based-text,.business-analytics-text,.tech-support-text,.order-management-text,.employee-management-text,.white-标签文字。品牌标签的文本,.lead跟踪文本,.custom发票文本,.goal设定文本,.customization工具文本,.royalty计算器,文本,.email营销-text {width:50%;} div.goal-setting,div.customization-tools,div.custom-invoicing,div.lead-tracking,div.email-marketing,div.royalty-calculator,div.brand-control ,div.franchisehubtv,div.cloudbasedtextipad,div.business-analytics,div.tech-support,div.employee-management,div.order-management,div.white-label {display:flex; margin-left:15%;保证金权利:15%; align-items:center; background-color:#f0f0f0;填充:2%; margin-bottom:5%;}。product-quotes {display:block;填充:20px 11px;宽度:90%;颜色:#3b3b3d;背景:白色; border-radius:2px;行高:1.625; font-family:'Roboto'; font-weight:normal; } .arrow-down {width:0; height:0; margin:auto; border-left:40px solid transparent; border-right:40px solid transparent; border-top:40px solid#f0f0f0;}。white {display: none;} @ media only screen and(max-width:767px){。product-all-contents {overflow-x:auto;} .product-contents .product {min-width:50.795%; margin:0 2%; padding-top:3.91%; padding-left:3.91%; padding-right:3.91%;}} @ media only screen and(max-width:767px){div.goal-setting,div.customization-tools,div。自定义发票,div.lead-tracking,div.email-marketing,div.royalty-calculator,div.brand-control,div.franchisehubtv,div.cloudbasedtextipad,div.business-analytics,div.tech-support,div。 employee-management,div.order-management,div.white-label {display:inline-block!important;}} @ media only screen and(max-width:767px){。franchise-hub-text,.cloud-based -text,.business-analytics-text,.tech-support-text,.order-management-text,.employee-manage文本,.white-label-text,.brand-control-text,.lead-tracking-text,.custom-invoicing-text,。goal-setting-text,.customization-tools-text,.royalty-calculator -text,.email-marketing-text {width:100%; }
<!doctype html>< html> < HEAD> < meta charset =utf-8> < meta name =viewportcontent =width = device-width,initial-scale = 1> <标题>测试和LT; /标题> < link rel =stylesheethref =sample.css> < script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < script type =text / javascriptsrc =script / myscript.js>< / script>< / head>< body> < div class =product-all-contents> < div class =product-contents> < div class =productid =franchisehub> < p style =font-size:15px; font-family:'Roboto'; margin-left:7%; margin-right:7%; line-height:1.2; margin-top:20%; color:rgb (58,59,60);> A< / p> < / DIV> < div class =productid =cloudbasedmobilestyle =background-color:#81bf44;> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-top:27%; color:white;> Z< / p> < / DIV> < div class =productid =businessanalytics> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-top:22%; color:rgb(58,59,60);> B< / p为H. < / DIV> < div class =productid =techsupport> < p style =font-size:15px; font-family:'Roboto'; margin-right:9%; line-height:1.2; margin-left:9%; margin-top:22%; color:rgb (58,59,60);> C< / p> < / DIV> < div class =productid =ordermanagement> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-top:23%; color:rgb(58,59,60);> D< / p为H. < / DIV> < div class =productid =employeemanagement> < p style =font-size:15px; font-family:'Roboto';行高:1.2; margin-left:5%; margin-top:27%; color:rgb(58,59,60) ;> E< / p为H. < / DIV> < div class =productid =whitelabel> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-left:14%; margin-right:14%; margin-top:8%; color:rgb (58,59,60);> M< / p> < / DIV> < / DIV> < div class =product-contents> < div class =productid =brandcontrol> < p style =font-size:15px; font-family:'Roboto'; margin-left:8%; line-height:1.2; margin-right:8%; margin-top:20%; color:rgb (58,59,60);> F< / p> < / DIV> < div class =productid =leadtracking> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-left:5%; margin-right:5%; margin-top:26%; color:rgb (58,59,60);> G< / p> < / DIV> < div class =productid =custominvoicing> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-top:24%; color:rgb(58,59,60);> K< / p为H. < / DIV> < div class =productid =goalsetting> < p style =font-size:15px; font-family:'Roboto'; margin-right:13%; margin-left:13%; line-height:1.2; margin-top:24%; color:rgb (58,59,60);> H< / p> < / DIV> < div class =productid =customizationtools> < p style =font-size:15px; font-family:'Roboto'; line-height:1.2; margin-top:22%; color:rgb(58,59,60);> I< / p为H. < / DIV> < div class =productid =royaltycalculator> < p style =font-size:15px; font-family:'Roboto';行高:1.2; margin-left:5%; margin-top:23%; color:rgb(58,59,60) ;> J< / p为H. < / DIV> < div class =productid =emailmarketing> < p style =font-size:15px; font-family:'Roboto'; margin-left:5%; margin-right:5%; line-height:1.2; margin-top:21%; color:rgb (58,59,60);> K< / p> < / DIV> < / DIV> < / DIV> < button id =arrow-left>&#60 ----< / button> < button id =arrow-right> ----&#62< / button>< / body>< / html>
I have a fiddle which is working in a way that when I take it in the mobile view, the square boxes horizontally scroll.
The CSS codes which I have used for that are:
@media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%;
padding-right: 3.91%;
}
}
Problem Statement:
I am wondering what changes I should make in the fiddle so that when I hit arrows in the mobile view (as shown in the screenshot below marked by orange arrow sign) the content move towards the left and vice-versa.
I think best solution will be jQuery, scrollLeft() and scrollRight() but I am not sure how I can implement it in the fiddle.
For your problem you need a few things
- Set two buttons to set the listeners in your code
Get the initial position so you can calculate the slide
let divMain = $('.product-all-contents')[0]; let position = $(divMain).children().position().left; const slideAmount = 150;
This 3 variables will be the main values for the code
Last make the listenes for the slide
$('#arrow-right').click(function() { $(divMain).animate({ scrollLeft: position + slideAmount }, 500); position += slideAmount; })
Hope this helps :>
$(document).ready(function() {
let divMain = $('.product-all-contents')[0];
let position = $(divMain).children().position().left;
const slideAmount = 150;
$('#arrow-right').click(function() {
$(divMain).animate({
scrollLeft: position + slideAmount
}, 500);
position += slideAmount;
})
$('#arrow-left').click(function() {
$(divMain).animate({
scrollLeft: position - slideAmount
}, 500);
position -= slideAmount;
})
});
.product-all-contents {
background-color: #f0f0f0;
width: 70%;
margin: auto;
}
.product-contents {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.product-contents .product {
width: 10%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
background-color: white;
border-radius: 10px
}
.ipads {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.franchise-hub-text,
.cloud-based-text,
.business-analytics-text,
.tech-support-text,
.order-management-text,
.employee-management-text,
.white-label-text,
.brand-label-text,
.lead-tracking-text,
.custom-invoicing-text,
.goal-setting-text,
.customization-tools-text,
.royalty-calculator-text,
.email-marketing-text {
width: 50%;
}
div.goal-setting,
div.customization-tools,
div.custom-invoicing,
div.lead-tracking,
div.email-marketing,
div.royalty-calculator,
div.brand-control,
div.franchisehubtv,
div.cloudbasedtextipad,
div.business-analytics,
div.tech-support,
div.employee-management,
div.order-management,
div.white-label {
display: flex;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}
.product-quotes {
display: block;
padding: 20px 11px;
width: 90%;
color: #3b3b3d;
background: white;
border-radius: 2px;
line-height: 1.625;
font-family: 'Roboto';
font-weight: normal;
"
}
.arrow-down {
width: 0;
height: 0;
margin: auto;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #f0f0f0;
}
.white {
display: none;
}
@media only screen and (max-width: 767px) {
.product-all-contents {
overflow-x: auto;
}
.product-contents .product {
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%;
padding-right: 3.91%;
}
}
@media only screen and (max-width: 767px) {
div.goal-setting,
div.customization-tools,
div.custom-invoicing,
div.lead-tracking,
div.email-marketing,
div.royalty-calculator,
div.brand-control,
div.franchisehubtv,
div.cloudbasedtextipad,
div.business-analytics,
div.tech-support,
div.employee-management,
div.order-management,
div.white-label {
display: inline-block !important;
}
}
@media only screen and (max-width: 767px) {
.franchise-hub-text,
.cloud-based-text,
.business-analytics-text,
.tech-support-text,
.order-management-text,
.employee-management-text,
.white-label-text,
.brand-control-text,
.lead-tracking-text,
.custom-invoicing-text,
.goal-setting-text,
.customization-tools-text,
.royalty-calculator-text,
.email-marketing-text {
width: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing</title>
<link rel="stylesheet" href="sample.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script/myscript.js"></script>
</head>
<body>
<div class="product-all-contents">
<div class="product-contents">
<div class="product" id="franchisehub">
<p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;
color: rgb(58, 59, 60);">A</p>
</div>
<div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 27%;
color:white;">Z</p>
</div>
<div class="product" id="businessanalytics">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 22%;
color: rgb(58, 59, 60);">B</p>
</div>
<div class="product" id="techsupport">
<p style=" font-size: 15px;
font-family: 'Roboto';
margin-right: 9%;
line-height: 1.2;
margin-left: 9%; margin-top: 22%;
color: rgb(58, 59, 60);">C</p>
</div>
<div class="product" id="ordermanagement">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 23%;
color: rgb(58, 59, 60);">D</p>
</div>
<div class="product" id="employeemanagement">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 27%;
color: rgb(58, 59, 60);">E</p>
</div>
<div class="product" id="whitelabel">
<p style="
font-size: 15px;
font-family: 'Roboto';
line-height:1.2;
margin-left: 14%;
margin-right: 14%; margin-top: 8%;
color: rgb(58, 59, 60);
">M</p>
</div>
</div>
<div class="product-contents">
<div class="product" id="brandcontrol">
<p style="
font-size: 15px;
font-family: 'Roboto';
margin-left: 8%;
line-height:1.2;
margin-right: 8%; margin-top: 20%;
color: rgb(58, 59, 60);
">F</p>
</div>
<div class="product" id="leadtracking">
<p style="
font-size: 15px;
font-family: 'Roboto';
line-height:1.2;
margin-left: 5%;
margin-right: 5%; margin-top: 26%;
color: rgb(58, 59, 60);
">G</p>
</div>
<div class="product" id="custominvoicing">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 24%;
color: rgb(58, 59, 60);">K</p>
</div>
<div class="product" id="goalsetting">
<p style="font-size: 15px;
font-family: 'Roboto';
margin-right: 13%;
margin-left: 13%;
line-height: 1.2; margin-top: 24%;
color: rgb(58, 59, 60);">H</p>
</div>
<div class="product" id="customizationtools">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 22%;
color: rgb(58, 59, 60);">I</p>
</div>
<div class="product" id="royaltycalculator">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 23%;
color: rgb(58, 59, 60);">J</p>
</div>
<div class="product" id="emailmarketing">
<p style="
font-size: 15px;
font-family: 'Roboto';
margin-left: 5%;
margin-right: 5%;
line-height:1.2; margin-top: 21%;
color: rgb(58, 59, 60);
">K</p>
</div>
</div>
</div>
<button id="arrow-left"><----</button>
<button id="arrow-right">----></button>
</body>
</html>
这篇关于如何在移动视图中点击箭头时向左和向右滚动内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!