Как сделать эффект прокрутки в слайдере изображений? - PullRequest
1 голос
/ 16 декабря 2011

Я сделал слайдер изображений, используя этот плагин http://slidesjs.com/ некоторое время назад для мобильного сайта.Чтобы соответствовать требованиям моего клиента, я также внес некоторые изменения в плагин и активировал некоторые функции для событий, определенных плагином.Теперь эффект слайдера также требуется в слайдере для изображений слайдера, перемещая их с помощью касания.

Я использовал несколько кодов прокрутки, но они конфликтуют с плагином, который я использовал ранее для создания слайдера.Как и в одно время, вы можете использовать только одну функциональность за один раз.

    <div class="slides-wrapper">
        <div class="wrapper-spacer"></div>
        <div class="slides-container">
            <div id="productImage1" class="slideshow-image">
                <img src="../images/ecommerce-work-1.png" alt="Product 1" />
            </div>
            <div id="productImage2" class="slideshow-image">
                <img src="../images/ecommerce-work-2.png" alt="Product 2" />
            </div>
            <div id="productImage3" class="slideshow-image">
                <img src="../images/ecommerce-work-3.png" alt="Product 3" />
            </div>
        </div>
    </div>

Это разметка основного контейнера слайдера изображений, надстройка для слайдера которого использует еще два контейнера для разбиения на страницы и следующую предыдущую кнопку.Хотя это еще один контейнер, который я использую для отображения имени изображения.Я исследовал некоторые плагины слайдеров, но они очень грубые, не используя переменные для имен классов, а не имен.Так что все производит много ошибок.Мне трудно вносить изменения в ядро ​​плагинов javascript, потому что я не являюсь разработчиком внешнего интерфейса и более знаком с php

. Я использовал этот плагин http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/, чтобы ввести эффект свипирования в изображениеслайдер.

Ответы [ 2 ]

1 голос
/ 12 июня 2012

У меня недавно была похожая проблема, и я использовал hammer.js: http://eightmedia.github.com/hammer.js/

0 голосов
/ 12 июня 2012

Я предлагаю вам использовать FlexSlider , который уже включает функцию смахивания. HTML-код почти такой же, как вы, просто измените имя класса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...