使用 Jquery-mobile 在时间轴上水平滑动

Question

我有一个时间轴，单击以水平滚动并显示更多数据，但是，在移动设备中，当您单击一次按钮时，它就像您按住按钮一样。

为了解决这个问题，我决定使用滑动事件，使用 jquery-mobile，我使用 CDN 导入，并使用 swipeleft 和 swiperight 事件，但它根本不滑动。

这是我的 codepen 页面的链接，您可以在其中看到时间线： https://codepen.io/Arthur_Oliveira/pen/GRKNGBb

非常感谢！

 (function($) { var $window = $(window); $window.resize(function resize(){ if ($window.width() < 1200) { function hideLeft() { event.preventDefault(); $('.backpage').animate({ scrollLeft: "+=100px" }, "slow"); } function showLeft() { event.preventDefault(); $('.backpage').animate({ scrollLeft: "-=100px" }, "slow"); } $(document).on("pageinit", "#my_view", function(){ $('.list-items').bind('swiperight', showLeft); $('.list-items').bind('swipeleft', hideLeft); }); $('.backpage').scroll(function() { if($('.backpage').scrollLeft() > 10){ $('#leftArrow').attr("src", "assets/img/arrows-mage.svg"); } else{ $('#leftArrow').attr("src", "assets/img/arrows-gray.svg"); } if($('.backpage').scrollLeft() > 400){ $('#rightArrow').attr("src", "assets/img/arrows-gray.svg"); } else{ $('#rightArrow').attr("src", "assets/img/arrows-mage.svg"); } }); $('.previous').click(function() { event.preventDefault(); $('.backpage').animate({ scrollLeft: "-=100px" }, "slow"); }); $('.dots li').click(function() { var href = $(this).attr('href'); var size = parseInt($(this).attr('data-fill')); var margin = parseInt($(this).css('marginLeft'))+20; var active = $('.active.actived').length; if($(this).hasClass('active')){ if($(".line-fill").css('width') == '120'){ }else{ $(".line-fill").animate({width: +(margin*(size))+30}, 300); } } else{ $(".line-fill").animate({width: "+="+(margin*(size-active))}, 300); } $('.dots li').removeClass('active'); $('.dots li').removeClass('actived'); $('.dots li').removeClass('was'); $(this).addClass('active'); $(this).prevAll().addClass('active'); $(this).addClass('actived'); $(this).prevAll().addClass('actived'); $(this).prevAll().addClass('was'); $('.timeline-size').removeClass('on'); $('.timeline-size').removeClass('out'); $(href).addClass('on'); $(href).prevAll().addClass('out'); }); } else{ $('.prox').click(function() { event.preventDefault(); $('.backpage').animate({ scrollLeft: "+=100px" }, "slow"); }); $('.backpage').scroll(function() { if($('.backpage').scrollLeft() > 10){ $('#leftArrow').attr("src", "assets/img/arrows-mage.svg"); } else{ $('#leftArrow').attr("src", "assets/img/arrows-gray.svg"); } if($('.backpage').scrollLeft() > 700){ $('#rightArrow').attr("src", "assets/img/arrows-gray.svg"); } else{ $('#rightArrow').attr("src", "assets/img/arrows-mage.svg"); } }); $('.previous').click(function() { event.preventDefault(); $('.backpage').animate({ scrollLeft: "-=100px" }, "slow"); }); $('.dots li').click(function() { var href = $(this).attr('href'); var size = parseInt($(this).attr('data-fill')); var margin = parseInt($(this).css('marginLeft'))+20; var active = $('.active.actived').length; if($(this).hasClass('active')){ if($(".line-fill").css('width') == '220'){ }else{ $(".line-fill").animate({width: +(margin*(size))+30}, 300); } } else{ $(".line-fill").animate({width: "+="+(margin*(size-active))}, 300); } $('.dots li').removeClass('active'); $('.dots li').removeClass('actived'); $('.dots li').removeClass('was'); $(this).addClass('active'); $(this).prevAll().addClass('active'); $(this).addClass('actived'); $(this).prevAll().addClass('actived'); $(this).prevAll().addClass('was'); $('.timeline-size').removeClass('on'); $('.timeline-size').removeClass('out'); $(href).addClass('on'); $(href).prevAll().addClass('out'); }); } }).trigger('resize'); })(jQuery);

 :root { --font-primary: sans-serif; --font-secondary: serif; /* set base values */ --text-base-size: 1.1em; --text-scale-ratio: 1.25; /* type scale */ --text-xs: calc(1.2em / (var(--text-scale-ratio) * var(--text-scale-ratio))); --text-sm: calc(1em / var(--text-scale-ratio)); --text-md: calc(1em * var(--text-scale-ratio)); --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-llg: calc(1.2em * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-xlg: calc(1.1em * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-xl: calc(0.9em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-xll: calc(1.4em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-xxl: calc(1.5em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-xxxl: calc(1.5em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-gg: calc(1.5em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-extragg: calc(1.8em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)); /* line-height */ --gsm-line-height: 1; --sm-line-height: 1.1; --md-line-height: 1.2; --xl-line-height: 1.3; --xxl-line-height: 1.4; --body-line-height: 1.6; --font-weight-extralight: 300; --font-weight-light: 400; --font-weight-normal: bold; --font-weight-bold: 800; /* Cores */ --primeira: #FF04FF; --segunda: #6A2380; --terceira: #523090; --quarta: #9080FF; --quinta: #e8e8e8; --sexta: #ffffff; --setima: #808080; --oitava: #333333; }.timeline { padding-top: 30px; margin-bottom: 150px; }.timeline-background { position: relative; width: 100%; height: 150px; background-color: var(--quinta); padding: 0; padding-top: 50px; } @media (max-width: 1200px) {.timeline { padding-top: 30px; margin-bottom: 10px; } } @media (max-width: 700px) {.timeline { padding-top: 30px; margin-bottom: 50px; } }.backpage { position: relative; overflow: hidden; width: 900px; padding-top: 20px; height: 100px; } @media (max-width: 1200px) {.backpage { position: relative; overflow: hidden; width: 750px; height: 100px; } } @media (max-width: 1000px) {.backpage { position: relative; overflow: hidden; width: 520px; height: 100px; } } @media (max-width: 450px) {.backpage { width: 300px; } } #leftArrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); } #rightArrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.list-items { position: absolute; width: 1200px; height: auto; margin: 0; padding: 0; margin-top: 20px; margin-left: -150px; } @media (max-width: 1000px) {.list-items { position: absolute; width: 550px; height: auto; margin: 0; padding: 0; margin-top: 20px; margin-left: -20px; } } @media (max-width: 650px) {.list-items { position: absolute; width: 450px; height: auto; margin: 0; padding: 0; margin-top: 20px; margin-left: -20px; } }.list-item { position: absolute; width: 1000px; top: 0; height: auto; margin: 0; padding: 0; } @media (max-width: 1200px) {.list-item { position: absolute; width: 850px; top: 0; height: auto; margin: 0; padding: 0; } } @media (max-width: 1000px) {.list-item { position: absolute; width: 580px; top: 0; height: auto; margin: 0; padding: 0; } } @media (max-width: 550px) {.list-item { position: absolute; width: 300px; top: 0; height: auto; margin: 0; padding: 0; } }.list-items li { position: relative; }.list-item button:first-child { position: absolute; left: 20px; top: 75px; cursor: pointer; list-style: none; width: 50px; height: 50px; background-color: #fff; border: 3px solid #AD80FF; color: #D9D9D9; border-radius: 50%; float: left; } @media (max-width: 550px) {.list-item button:first-child { left: -20px; } }.list-item button:last-child { position: absolute; right: 25px; top: 75px; cursor: pointer; list-style: none; width: 50px; height: 50px; margin-left: 50px; background-color: #fff; border: 3px solid #AD80FF; color: #D9D9D9; border-radius: 50%; float: left; } @media (max-width: 550px) {.list-item button:last-child { right: -20px; } }.list-item button:last-child:hover { color: var(--primeira); }.list-item button:first-child:hover { color: var(--primeira); }.list-item.active { }.list-items li { cursor: pointer; margin-left: 150px; top: -1px; list-style: none; width: 20px; height: 20px; background-color: #fff; border: 3px solid #D9D9D9; margin-top: 0; border-radius: 50%; float: left; } @media (max-width: 1000px) {.list-items li { cursor: pointer; margin-left: 50px; list-style: none; top: 2px; width: 15px; height: 15px; background-color: #fff; border: 3px solid #D9D9D9; border-radius: 50%; float: left; } }.list-items li.active { position: relative; top: -5px; cursor: pointer; width: 30px; height: 30px; margin-left: 150px; list-style: none; border: 3px solid var(--primeira); background-color: var(--primeira); border-radius: 50%; float: left; }.list-items li.active.timeline-legenda { position: absolute; width: 200px; top: -25px; left: -4px; font-size: 14px; font-weight: 400; color: var(--primeira); }.list-items li.was.timeline-legenda { position: absolute; width: 200px; top: -25px; left: -4px; font-size: 14px; font-weight: 400; color: #4D4D4D;important: } @media (max-width. 1000px) {.list-items li:active { cursor; pointer: margin-left; 50px: list-style; none: border; 3px solid var(--primeira): background-color; var(--primeira): border-radius; 50%: float; left. } }.list-items li.active:was { position; relative: top; -1px:important; cursor: pointer; width: 20px;important: height; 20px:important; margin-left: 150px; list-style: none; border: 3px solid var(--primeira); background-color: #fff;important: border-radius. 50%. float. left: } @media (max-width; 1000px) {:list-items li;active:was { position; relative: top; -1px:important; cursor: pointer; width: 20px;important: height; 20px:important; margin-left: 50px; list-style: none; border. 3px solid var(--primeira): background-color; #fff:important; border-radius: 50%; float: left; } }:line-gray{ width; 100%. height: 4px; background: #D9D9D9; position: absolute; top: 7px; }:line-fill{ width; 220px: height. 4px: background; var(--primeira): position; absolute: top; 7px: } @media (max-width; 1000px) {:line-fill{ width; 120px. height: 4px; background: var(--primeira); position. absolute: top; 7px: } };dots { width: 100%; position: relative; }:timeline-content { position; relative: width; 100%: height; auto: background-color; var(--quinta). padding: 0; padding-top: 0; padding-bottom: 30px; text-align: left; }.timeline-size { position. absolute: margin-top;0: width; 50%: opacity; 0: } //Seta animação de entrada do texto;timeline-size:on { position. relative; opacity: 1. width; 40%: display. block:important; animation: in 0;75s: -webkit-animation; in 0:75s; } @media (max-width. 1282px) {.timeline-size { position: absolute; margin-top:0; width: 70%;important: opacity. 0: };timeline-size:on { width; 70%: margin; 0 auto: display; block.important. } } @media (max-width: 800px) {;timeline-size { position: absolute; margin-top:0; width: 60%.important: opacity; 0: };timeline-size:on { width; 60%: margin; 0 auto. display. block:important; } } @media (max-width: 500px) {;timeline-size { position. absolute. margin-top:0; width: 70%;important: opacity. 0; }:timeline-size.on { width; 70%. display: block;important: } } //Seta animação de saida do texto;timeline-size:out { margin-top;0: width; 50%: animation; out 0:75s; -webkit-animation: out 0.75s: };timeline-title { font-size: 60px; font-weight: 400; line-height: 141px; color: #52308A; margin: 0; padding: 0; } @media (max-width: 1500px) {.timeline-title { font-size: 40px; font-weight: 400; line-height: 40px; color: #52308A; margin: 0; padding: 0; margin-bottom: 10px; } } @media (max-width. 600px) {:timeline-title { font-size; 40px: font-weight; 400: line-height; 40px: color; #52308A. margin: 0; padding: 0; margin-bottom: 10px; } }.timeline-cite { font-size: 18px; font-weight: 300; line-height: 28px; color: var(--setima); }:timeline { position; relative: width; 100%; margin-top: 100px; } .timeline-legenda { position: absolute; width: 200px; top: -25px; left: -10px; font-size: 14px; color: #4D4D4D; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="timeline margin-top--xxl margin-bottom--xxl"> <div class="d-flex d-xl-flex justify-content-center justify-content-xl-center timeline-background"> <div class="backpage"> <section class="list-items"> <div class="line-gray"></div> <div class="line-fill"></div> <ul class="dots"> <li class="active actived" href="#content1" data-fill="1"><span class="timeline-legenda">20 jul</span><a class="item" href="#"></a></li> <li href="#content2" data-fill="2"><a class="item" href="#"></a><span class="timeline-legenda">20 jul</span></li> <li href="#content3" data-fill="3"><a class="item" href="#"></a><span class="timeline-legenda">20 jul</span></li> <li href="#content4" data-fill="4"><a class="item" href="#"></a><span class="timeline-legenda">20 jul</span></li> <li href="#content5" data-fill="5"><a class="item" href="#"></a><span class="timeline-legenda">20 jul</span></li> <li href="#content6" data-fill="6"><a class="item" href="#"></a><span class="timeline-legenda">20 jul</span></li> </ul> </section> </div> <div class="list-item"><button class="btn previous" type="button"><img id="leftArrow" src="arrows-mage.svg" /></button><button class="btn prox" type="button"><img id="rightArrow" src="arrows-gray.svg" /></button></div> </div> <div class="d-xl-flex justify-content-xl-center timeline-content"> <div id="content1" class="container timeline-size on"> <p class="timeline-title">Arcu cursus <span class="timeline-cite">— Nunc Pulvinar Sapien 2019</span></p> <p class="texto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="content2" class="container timeline-size"> <p class="timeline-title">Hey cursus <span class="timeline-cite">— Nunc Pulvinar Sapien 2019</span></p> <p class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in. Volutpat consequat mauris nunc congue nisi vitae suscipit. Arcu cursus euismod quis viverra nibh. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis purus sit amet volutpat. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod quis viverra nibh cras pulvinar mattis. Iverra maecenas accumsan lacus vel facilisis volutpat est velit. Egestas purus</p> </div> <div id="content3" class="container timeline-size"> <p class="timeline-title">Hey cursus <span class="timeline-cite">— Nunc Pulvinar Sapien 2019</span></p> <p class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in. Volutpat consequat mauris nunc congue nisi vitae suscipit. Arcu cursus euismod quis viverra nibh. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis purus sit amet volutpat. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod quis viverra nibh cras pulvinar mattis. Iverra maecenas accumsan lacus vel facilisis volutpat est velit. Egestas purus</p> </div> <div id="content4" class="container timeline-size"> <p class="timeline-title">Hey cursus <span class="timeline-cite">— Nunc Pulvinar Sapien 2019</span></p> <p class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in. Volutpat consequat mauris nunc congue nisi vitae suscipit. Arcu cursus euismod quis viverra nibh. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis purus sit amet volutpat. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod quis viverra nibh cras pulvinar mattis. Iverra maecenas accumsan lacus vel facilisis volutpat est velit. Egestas purus</p> </div> <div id="content5" class="container timeline-size"> <p class="timeline-title">Hey cursus <span class="timeline-cite">— Nunc Pulvinar Sapien 2019</span></p> <p class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in. Volutpat consequat mauris nunc congue nisi vitae suscipit. Arcu cursus euismod quis viverra nibh. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis purus sit amet volutpat. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod quis viverra nibh cras pulvinar mattis. Iverra maecenas accumsan lacus vel facilisis volutpat est velit. Egestas purus</p> </div> <div id="content6" class="container timeline-size"> <p class="timeline-title">Hey cursus <span class="timeline-cite">— Nunc Pulvinar Sapien 2019</span></p> <p class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in. Volutpat consequat mauris nunc congue nisi vitae suscipit. Arcu cursus euismod quis viverra nibh. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sagittis purus sit amet volutpat. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Et malesuada fames ac turpis egestas sed tempus urna et. Euismod quis viverra nibh cras pulvinar mattis. Iverra maecenas accumsan lacus vel facilisis volutpat est velit. Egestas purus</p> </div> </div> </div>