Question

在一个好的教程的帮助下，我创建了一个简单的幻灯片，但它没有响应.. 接下来我在互联网上搜索了一些解决方案，我认为我已经找到了，比如将宽度设置为100％，将高度设置为auto。这些东西与一个图像完美配合，没有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);

});

我希望有人可以帮助我，我已经搜索了很长时间，我只是看不到它。我想在不使用插件的情况下解决这个问题...

亲切的问候！

Answer 1

两件事。首先，从max-width中删除#slider属性。然后，将!important添加到width上的#slider ul声明中。这应该可以解决问题。

幻灯片中的图像无响应

1 个答案: