jQuery «Слайды» не работает - PullRequest
Новая
       18

jQuery «Слайды» не работает

0 голосов
/ 10 января 2012

Я использую скрипт на сайте slidesjs.com (http://slidesjs.com/examples/simple/),, пытаясь разместить его на своей веб-странице. Я решил использовать скрипт, а не просто пытаться написать его в jQuery, так как не смог заставить его работать, и Я подозреваю, что та же самая проблема возникает здесь .. что бы это ни было. Вот исходный код страницы. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>John Smith</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="js/slides.min.jquery.js"></script>
    <script>
        $(function(){
            $('#sections').slides({
                preload: true,
                generateNextPrev: true

контейнер: 'section_container' }); }); Веб-разработчик Джон Смит

Этот текст предназначен только для заполнения пространства, пока я не добавлю реальный контент. 

                </p>
                <p id="contact">If you'd like to contact me about anything, don't hesitate to email me at j.smith@example.com</p>
                <div id="social_media"><img src="images/social_media/facebook.png" /><img src="images/social_media/twitter.png" /><img src="images/social_media/flickr.png" /><img src="images/social_media/youtube.png" /></div>
                <div class="clear"></div>
            </div>
            <div>
                <h3 class='heading'>Information</h3>
                <p>
                    <ul>
                        <li><strong>Name:</strong> John Smith</li>
                        <li><strong>Location:</strong> Sydney, Australia</li>
                    </ul>
                </p>
                <br />
                <h3 class='heading'>Achievements & Experience</h3>
                <p>
                    <ul>
                        <li>Worked at Google</li>
                        <li>Worked at McDonalds</li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
</body>

CSS, если кому-то интересно. 

* {
padding:0;
margin:0;
}

a {
color:white;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

body {
background: url('images/background.png');
font-size:12px;
font-family:arial;
color:#E5E5E5;
}

.sections_container {
width:768px;
display:none;
}

li {
margin-left:20px;
}

.sections_container div {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
display:block;
}

.pagination {
        list-style:none;
        margin:0;
        padding:0;
    }

    /*
        Optional:
        Show the current slide in the pagination
    */
    .pagination .current a {
        color:red;
    }

.top {
margin: 15px auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}

.section {
margin: 0 auto 4px auto;
width:768px;
background: rgba(0,0,0,0.3);
padding:10px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border:1px #7F7F7F solid;
box-shadow: inset 2px 2px #191919;
}

h1,h2,h3,h4,h5,h6 {

}

#subtitle {
color:#919191;
text-align:right;
}

#title {
text-align:right;
}

#profile {
float:left;
height:52px;
width:52px;
}

#youtube_video {
float:right;
padding-left:10px;
}

#contact {
margin-top:8px;
font-weight:bold;
font-style:italic;
}

#social_media {
margin-top:40px;
text-align:center;
}

.heading {
text-align:center;
}

.demphasis {
color:#9E9E9E;
}

.clear {
clear:both;
}

Спасибо!

Ответы [ 3 ]

2 голосов
/ 10 января 2012

OK. Я вижу пару маленьких вопросов.

Во-первых, в вашем CSS вы ссылаетесь на .section_container, тогда как в HTML это <div class="sections_container"> - отметьте 's' в середине. То же самое для секции / с.

Во-вторых, похоже, что по умолчанию SlideJS имеет значение «slides_container». Либо переименуйте ваши div, либо задайте имя контейнера, когда вы инициализируете его: 

 $('#sections').slides({
     preload: true,
     generateNextPrev: true,
     container: 'sections_container'
 });

Я создал небольшой jsFiddle на http://jsfiddle.net/jCFeQ/ - у него все еще есть некоторые проблемы, но он ближе к работе, чем когда мы начинали. Измените эти две вещи и посмотрите, как вы пойдете.

1 голос
/ 10 января 2012

Похоже, в вашем CSS есть опечатка, которая ссылается на отсутствующий элемент HTML: 

.section_container div {
    ...
}

Вместо .section_container ваш CSS должен быть .sections_container (обратите внимание на множественное число), что соответствует вашемуHTML: 

<div class="sections_container">
    <div></div>
        ...
    <div></div>
</div>

Кроме того, плагин jQuery Slides ожидает HTML-элемент с классом .slides_container в качестве родителя слайдов.

Так как вы 'отклонившись от разметки по умолчанию, вам нужно будет указать в контейнере опцию плагина в функции jQuery: 

<script>
    $(function(){
        $('.sections_container').slides({
            preload: true,
            generateNextPrev: true,
            container: 'sections_container'
        });
    });
</script>
0 голосов
/ 10 января 2012

Глупый вопрос, но, учитывая, что вы скопировали буквенно-буквенный код кода из этого примера: действительно ли файл, на который вы ссылаетесь в <script src="js/slides.min.jquery.js"></script>, существует - у вас есть папка js с этим файлом внутри нее?

Также версия 1.5.1 jQuery довольно устарела.Это не должно иметь никакого значения, но вы могли бы также изменить это на 1.7.1

...