Адаптивный слайдер работает не так, как ожидалось

ProgramBox

Адаптивный слайдер работает не так, как ожидалось

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #css #responsive-design

#javascript #jquery #css #адаптивный дизайн

Вопрос:

Я пытаюсь добавить адаптивный слайдер на свой веб-сайт.

И я решил следовать кодам в http://responsiveslides.com /. Однако, когда я тестирую коды в своем браузере — firefox, изображения не перемещаются, что означает, что я показываю только неподвижное изображение.

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

Мой HTML-код :

 <div class="callbacks_container">
    <ul class="rslides" id="slider4">
        <li>
            <img src="img/banner01.jpg" alt="">
            <p class="caption">This is a caption</p>
        </li>
        <li>
            <img src="img/banner02.jpg" alt="">
            <p class="caption">This is another caption</p>
        </li>
        <li>
            <img src="img/banner03.jpg" alt="">
            <p class="caption">The third caption</p>
        </li>
    </ul>
</div>

И я добавил javascript и ссылку под следующим:

 <link rel="stylesheet" href="StyleSheet.css" type="text/css" />
<script src="jquery.js"></script>
<script src="responsive.js"></script>
<script>

$(function () {
    // Slideshow 4
    $("#slider4".rslides).responsive({
        auto: false,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
            $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
            $('.events').append("<li>after event fired.</li>");
        }
    });
});
</script>
<script>

$(function () {
    $("#slider4").responsive({
        auto: true,
        pager: false,
        nav: true,
        speed: 800,
        namespace: "callbacks",
    });
});
</script>

Мой CSS :

 .rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}
.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}
.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}
.callbacks_container {
    margin-bottom: 50px;
    position: relative;
    float: left;
    width: 100%;
}
.callbacks {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.callbacks li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.callbacks img {
    display: block;
    position: relative;
    z-index: 1;
    height: auto;
    width: 100%;
    border: 0;
}
.callbacks .caption {
    display: block;
    position: absolute;
    z-index: 2;
    font-size: 20px;
    text-shadow: none;
    color: #fff;
    background: #000;
    background: rgba(0, 0, 0, .8);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    margin: 0;
    max-width: none;
}
.callbacks_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 52%;
    left: 0;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: transparent url("themes/themes.gif") no-repeat left top;
    margin-top: -45px;
}
.callbacks_nav:active {
    opacity: 1.0;
}
.callbacks_nav.next {
    left: auto;
    background-position: right top;
    right: 0;
}

Для jquery.js Я скопировал с веб-сайта Jquery 1.8.1.3 и прикрепил соответствующим образом.

The responsiveSlides.js Я назвал его как responsive.js в моих файлах.

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

Спасибо.

1. как мне выполнить поиск кода, который вы отформатировали для меня?

2. Нет. Он не работает после того, как я скопировал ваш форматированный код, чтобы заменить свой код. Он не работает. Изображение по-прежнему вообще не движется.

3. вы неправильно поняли. Ваш вопрос сопровождался очень трудным для чтения кодом. В будущем, пожалуйста, отформатируйте его самостоятельно, используя, например, jsfiddle. net, а затем разместите ссылку на скрипку и здесь

4. Я вижу. Извините, я неправильно понял.

Ответ №1:

Попробуйте это

Вы инициализировали скрипт два раза, в первом из них ошибка опечатки в этой строке $("#slider4".rslides).responsive({

Просто добавьте приведенный ниже скрипт внутри тега script

 $(function () {
    $("#slider4").responsive({
        auto: true,
        pager: false,
        nav: true,
        speed: 800,
        namespace: "callbacks"
    });
})

Ответ №2:

Используйте это вместо использования вышеупомянутого скрипта, который содержит те же элементы.

 $(function () {
    $("#slider4").responsive({
        auto: true,
        pager: false,
        nav: true,
        speed: 800,
        namespace: "callbacks"
    });
});

Ответ №3:

Может быть, поместить код jQuery внутрь:

 $(document).ready(function() 
{
    // code
});

Возможно, он просто не загружается при загрузке документа. Хотя я предполагаю.

Ответ №4:

Вы должны вызвать responsiveSlides вместо responsive , потому что responsive — это неопределенная функция.