изображения в слайд-шоу не реагируют

0

С помощью хорошего учебника я создал простое слайд-шоу, но оно не реагировало. Затем я искал в Интернете какие-то решения, которые, как я думал, я нашел, как установить ширину на 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);

});

Я надеюсь, что кто-то может мне помочь, я уже давно ищу, и я просто не вижу этого. И я хотел бы исправить это, не используя плагин...

С уважением!

Теги:
slider
image-size

1 ответ

1

Две вещи. Сначала удалите свойство max-width из #slider. Затем добавьте !important для объявления width на #slider ul. Это должно решить проблему.

  • 0
    Нет, это не решает проблему: s
  • 0
    Чего вы ожидаете? Изображения для заполнения ширины экрана? Если вы уменьшите размер браузера, размер изображения изменится. Разве это не то, что вы хотели?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню