Superslides.js在移动设备上无法正常运行

时间:2014-11-20 20:02:25

标签: jquery responsive-design slideshow swipe-gesture

我在我的网站上使用superslides.js进行全屏响应式幻灯片放映,但由于某种原因它无法正常工作。

它在个人电脑上运行良好,问题始于移动设备,其中超级滑板运行不正常。快速了解我遇到的问题;

      
  • 通常您应该可以滑动到下一张图片
  • 幻灯片应该在其他内容的“下方”,但有时它似乎在内容的顶部,你可以滑动,但一切只是在幻灯片下滑动... +有时会发生这种情况,而不是全部时间......
  • 此外,图像的大小非常大(如同几个kb的数量),这可能导致所有这些麻烦吗?

建议您自己快速浏览一下移动设备。 该网站可在此处查看http://minimalito.be/tripalFinal/

虽然您可以查看网站的代码,但这是我的index.html;

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Tripel Swag, het nieuwe bier uit Dendermonde!">
    <meta name="keywords" content="Tripel Swag, Dendermonde, Zannoise, bier, hoge goesting">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tripel Swag</title>

    <link href='http://fonts.googleapis.com/css?family=Raleway:800,700,600' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/superslides.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

</head>
<body>
    <div id="home"></div>
    <div id="mainMenu" class="row">
        <span id="mainLogo">
            <img src="img/logoTripelSwag.png" alt="Logo Tripel Swag"/>
        </span>
        <ul id="menu" class="uppercase">
            <li><a href="#home">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
        </ul>
        <img src="img/respMenuList.gif" id="respMenuList" alt="Menu"/>
        <ul id="proxyMenu" class="uppercase">
            <li class="dummyItem"><a href="#"></a></li>
            <li id="liHome"><a href="#home">home</a></li>
            <li id="liAbout"><a href="#about">about</a></li>
            <li id="liContact"><a href="#contact">contact</a></li>
        </ul>
    </div>

    <div id="slideshow" class="row">
        <div id="slides">
            <div class="slides-container">
              <img src="img/bz.jpg" alt="Cinelli">
              <img src="img/ts.jpg" alt="Surly">
              <img src="img/tb.jpg" alt="Beers">
              <img src="img/kb.jpg" alt="More beer">
            </div>

            <nav class="slides-navigation">
              <a href="#" class="next navigationArrows"></a>
              <a href="#" class="prev navigationArrows"></a>
            </nav>
        </div>
    </div>
    <div class="container">
        <div id="about"></div>
        <div id="info" class="row">
            <div id="maxWidth">
                <span id="sTitle" class="uppercase">over tripel swag</span>
                <br/>
                <span id="bTitle" class="uppercase">bier van hoge goesting</span>
                <p class="aboutTripple">
                Tripel Swag is een Belgisch goudblond bier van hoge goesting. Een zomers pop-up bier, met een uitgesproken smaak, beschikbaar in beperkte oplage! De Swag werd voor het eerst gebrouwen in 2013 in de Dendermondse Brasserie Zannoise, door brouwer Herman Van Zande en chef-kok Ben Minnebo. 
                Dit exclusieve en smaakvolle product is beschikbaar aan de tap en te verkrijgen in een authentieke bak (12 of 24 stuks) en flessen van 75 cl. Eigen goesting eerst! Kortom, de tijd ‘drinkt’ … Geniet ervan! Swag!
                </p>
            </div>
        </div>
        <div id="order" class="row">
            <span id="orderTitle" class="uppercase">tripel swag bestellen doe je <a href="mailto:info@tripelswag.com">hier</a></span>
        </div>
        <div id="contact"></div>
        <div id="socialMedia" class="row">
            <ul>
                <li id="gf">gf</li>
                <li id="gm">gm</li>
            </ul>
            <p id="copyRight">&copy; Tripel Swag 2014. All rights reserved. Design <a href="http://windwaait.be/" target="_blank">Windwaait</a>. Website <a href="http://www.minimalito.be/" target="_blank">Minimalito</a>.</p>
        </div>
    </div>

    <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script src="js/vendor/jquery.easing.1.3.js"></script>
    <script src="js/vendor/jquery.animate-enhanced.min.js"></script>
    <script src="js/vendor/jquery.superslides.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>/*
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');*/
    </script>

    <script>
        $(document).ready(function(){
            var $root = $('html, body');
            $("#mainMenu a, #proxyMenu a").click(function(){
                var $href = $.attr(this, 'href');
                $root.animate({
                    scrollTop: $( $href ).offset().top
                }, 500, function(){
                    window.location.hash = $href;
                });
                return false;
            });

            $("#proxyMenu li").click(function(){
                var $href = $(this).find("a").attr("href");
                $root.animate({
                    scrollTop: $( $href ).offset().top
                }, 500, function(){
                    window.location.hash = $href;
                });
            });

            $(".container, #slideshow, #proxyMenu li, #proxyMenu li a").click(function(){
                $("#proxyMenu").slideUp(300);
            });

            $("#respMenuList").click(function(){
                $("#proxyMenu").slideToggle(300);
            });

            $("#proxyMenu li").hover(function(){
                $(this).find("a").css("color", "#1f4c47");
            }, function(){
                $(this).find("a").css("color", "#fff");
            });

            $('#slides').superslides({
                animation: 'fade'
            });

            var ssPos = $("#slideshow").position();
            $(".container").offset({top: ssPos.top + $("#slideshow").height() + $("#mainMenu").height() });
        });
    </script>
</body>

它必须与我认为的其他html / js代码冲突,但我不能为我的生活弄清楚...

我一直坚持这一点,我不知道问题的原因是什么,如果有人可以提供帮助,我会非常(!)感激不尽!日Thnx!

0 个答案:

没有答案