I'm using superslides.js for a fullscreen responsive slideshow on my site, but it's not working correctly for some reason.
It's working well on pc, the troubles start on mobile devices, where the superslider isn't really functioning well. To give a quick rundown on the problems i've encountered;
- Normally you should be able to swipe to the next image
- The slideshow should be 'beneath' the rest of the content, but sometimes it appears to be on top of the content, you can slide still, but everything just slides under the slideshow... + this happens sometimes, not all the time...
- Also, the images are quite large in size (as in a few hundereds of kb), could this be causing all those troubles?
It is recommended though that you take a quick look on a mobile device for yourself. The site can be viewed here http://minimalito.be/tripalFinal/
Although you can look at the code of the site, here is my 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:[email protected]">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">© 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>
It must be conflicting with other html/js code I assume, but I can not for the life of me figure it out...
I've been stuck on this for a hwile, I have no clue what the cause of the problems are, if anyone could help, I would be very(!) grateful! Thnx!