С помощью хорошего учебника я создал простое слайд-шоу, но оно не реагировало. Затем я искал в Интернете какие-то решения, которые, как я думал, я нашел, как установить ширину на 100% и высоту на авто. Эти вещи прекрасно работают с одним изображением и без jQuery (обязательно для слайдера). Но с JQuery он просто не работает... потому что ползунок должен реагировать, мне пришлось изменить переменную для sliderWidth (= sliderBreedte) с фиксированной ширины, например 250px, до $ (". Slide img"). Width(), Но теперь все изображения появляются под друг другом, и ничего не остается, чтобы слайд...
вы можете увидеть мою проблему здесь: http://liesbeth.kissr.com/
и вот 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>
здесь 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;
}
здесь jQuery, где я думаю, является проблемой...
$(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);
});
Я надеюсь, что кто-то может мне помочь, я уже давно ищу, и я просто не вижу этого. И я хотел бы исправить это, не используя плагин...
С уважением!
Две вещи. Сначала удалите свойство max-width
из #slider
. Затем добавьте !important
для объявления width
на #slider ul
. Это должно решить проблему.