Slide effect of Carousel bootstrap does not work on iphone

Asked

Viewed 1,126 times

-1

I am building a responsive web page with the bootstrap plugin. Everything works fine in desktop browsers, even in low resolution. But when I open the page in Chrome or Safari, on my iphone, the carousel does not slide. It goes to the next slide but without using the sliding effect.

Online site: http://diogoalmeida.pt/2/index.html

HTML:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
                <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">

        <!-- Google Web Font Embed -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

        <!-- Custom CSS -->
        <link rel="stylesheet" href="css/style.css">
        <!-- Blueimp Gallery -->
        <link rel="stylesheet" href="css/blueimp-gallery.css">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.css">


        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <!--Menu -->
        <nav class="navbar navbar-fixed navbar-green" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="menu">
                    <ul class="nav nav-green navbar-nav navbar-right">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Carousel -->
        <div class="container-fluid myCarousel">
            <div class="container">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="images/thumbnails/banana.jpg" alt="Banana">
                        </div>
                        <div class="item">
                            <img src="images/thumbnails/banana.jpg" alt="Banana">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- Gallery -->
        <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
        <div class="container">
            <div id="links">
                <a href="images/banana.jpg" title="Banana">
                    <img src="images/thumbnails/banana.jpg" style="width:10%;" alt="Banana">
                </a>
                <a href="images/apple.jpg" title="Apple">
                    <img src="images/thumbnails/apple.jpg" style="width:10%;" alt="Apple">
                </a>
                <a href="images/orange.jpg" title="Orange">
                    <img src="images/thumbnails/orange.jpg" style="width:10%;" alt="Orange">
                </a>
            </div>
        </div>

        <!-- JQuery -->
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery.mobile-1.4.4(custom-touch).js"></script>
        <!-- Bootstrap JS -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Blueimp Gallery -->
        <script src="js/jquery.blueimp-gallery-1.2.2.min.js"></script>
        <script>
            document.getElementById('links').onclick = function (event) {
                event = event || window.event;
                var target = event.target || event.srcElement,
                link = target.src ? target.parentNode : target,
                options = {index: link, event: event},
                links = this.getElementsByTagName('a');
                blueimp.Gallery(links, options);
            };
        </script>
        <script>
            $(document).ready(function() {
                $("#myCarousel").swiperight(function() {
                    $(this).carousel('prev');
                });
                $("#myCarousel").swipeleft(function() {
                    $(this).carousel('next');
                });
            });
        </script>
    </body>
</html>

1 answer

0

Browser other questions tagged

You are not signed in. Login or sign up in order to post.