如何在移动视图中点击箭头时向左和向右滚动内容？

我有一个小提琴 ，其工作方式是当我在移动视图中取出时，方框水平滚动。

我用过的CSS代码是：

@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%; } } 

问题陈述：

我想知道我应该在小提琴中做出什么改变，以便当我在移动视图中点击箭头时（如下面的屏幕截图中标有橙色箭头标记所示） ，内容向左移动，反之亦然。

我认为最好的解决方案将是jQuery，scrollLeft（）和scrollRight（），但我不知道如何在小提琴中实现它。

Answer 1

对于你的问题，你需要一些东西

1. 设置两个按钮以在代码中设置侦听器

2. 获取初始位置，以便计算幻灯片

   让divMain = $（’。product-all-contents’）[0]; let position = $（divMain）.children（）。position（）。left; const slideAmount = 150;

这3个变量将是代码的主要值

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() { $(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%; } } 

            
 
 
 
A
 
 
 
Z
 
 
 
B
 
 
 
C
 
 
 
D
 
 
 
E
 
 
 
M
 
 
 
 
 
F
 
 
 
G
 
 
 
K
 
 
 
H
 
 
 
I
 
 
 
J
 
 
 
K
 
 
 
 <---- ---->