With help of a good tutorial I created a simple slideshow, but it wasn't responsive.. Next I searched the internet for some solutions, which I thought I had found, like setting width to 100% and height to auto. These things work perfectly with one image and without the jQuery(necessarily for the slider). But with the JQuery it just doesn't work... because the slider must be responsive I had to change the variable for sliderWidth(=sliderBreedte) from a fixed width like 250px to $(".slide img").width(). But now all the images appear underneath eachother and there is nothing left to slide...
you can see my problem here: http://liesbeth.kissr.com/
and here is the html:
<!doctype html>
<html lang="en">
<head>
<meta content="charset=utf-8">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial- scale=1">
<title>Liesbeth Vanaerschot</title>
<link rel="stylesheet" href="css/reset.css" media="all">
<link rel="stylesheet" href="css/style.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="js/jquery.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<!-- <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> -->
</head>
<body>
<div id="overlay">
<div id="modal">
<div id = "slider">
<ul>
<li class="slide" id="studio1">
<img src="images/destudio1b.svg" alt="destudio1">
</li>
<li class="slide" id="studio2">
<img src="images/destudio2b.svg" alt="destudio2">
</li>
<li class="slide" id="studio3">
<img src="images/destudio3b.svg" alt="destudio3">
</li>
<li class="slide" id="studio4">
<img src="images/destudio4b.svg" alt="destudio4">
</li>
</ul>
<div class="navigatie">
<a id="vorige" ></a>
<a id="volgende" ></a>
</div>
</div>
<div>
<p>Content you want the user to see goes here.</p>
<a id="sluit">sluit</a>
</div>
</div>
</div>
here the css:
body
{
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#overlay
{
/*display: none;*/
/*position: fixed;*/
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
background-image: url(../images/wie.svg);
}
#modal
{
margin-left: auto;
margin-right: auto;
margin-top: 150px;
background-color: red;
padding:15px;
text-align:center;
}
#slider
{
width: 100%;
max-width: 350px;
min-width: 100px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 0;
border-bottom: 1px dashed #FF4E00;
}
#slider ul
{
width: 100%;
max-width: 350px;
min-width: 100px;
padding: 0;
list-style-type: none;
}
.slide
{
margin-left: auto;
margin-right: auto;
display: inline;
width: 100%;
max-width: 350px;
min-width: 100px;
height: auto;
}
#studio1 img,
#studio2 img,
#studio3 img,
#studio4 img
{
width: 100%;
max-width: 350px;
min-width: 200px;
height: auto;
}
.navigatie
{
height: 40px;
line-height: 40px;
}
.navigatie a
{
display: block;
cursor: pointer;
padding: 0 15px;
margin: 4px 10px 0px 10px;
}
#vorige
{
float: left;
background-image: url(../images/vorige.gif);
background-repeat: no-repeat;
background-size: 80%;
height: 30px;
}
#volgende
{
float: right;
background-image: url(../images/volgende.gif);
background-repeat: no-repeat;
background-size: 80%;
height: 30px;
}
here the jQuery where I think is the problem...
$(document).ready(function(){
//slideshow
var slides = $('#slider ul li');
var slideAantal = slides.length;
var slideBreedte = $(".slide img").width();
var slideHuidig = 0;
$('#slider ul').css('width', slideAantal * slideBreedte);
$(".navigatie a").click(function() {
if($(this).attr("id") == "volgende")
{
slideHuidig = slideHuidig + 1;
}
if($(this).attr("id") == "vorige")
{
slideHuidig = slideHuidig - 1;
}
navigatie(slideHuidig);
$("#slider ul").animate({"marginLeft" : (-slideHuidig * slideBreedte)});
});
function navigatie(slideHuidig){
if(slideAantal - 1 == slideHuidig)
{
$("#volgende").hide();
}
else
{
$("#volgende").show();
}
if(slideHuidig == 0)
{
$("#vorige").hide();
}
else
{
$("#vorige").show();
}
};
navigatie(slideHuidig);
});
I hope somebody can help me, I am already searching for a long time and I just can't see it. And I would love to fix this without using a plugin...
Kind Regards!
Two things. First, remove the
max-widthproperty from#slider. Then, add!importantto yourwidthdeclaration on#slider ul. This should fix the problem.