Плагин цикла: поверните миниатюру пейджера в слайдер

StackOverflow https://stackoverflow.com//questions/25073321

Вопрос

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

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

Я просто хочу повернуть большой палец, как изображение ниже: Введите описание изображения здесь

Это было полезно?

Решение

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

https://adgallery.codeplex.com/

Ad Gallery уже выдвинул эскиз в нижней части изображения и простой в использовании.

Другие советы

Есть ползунок на Github Ссылка на страницу github Я нашел это похоже на ваш слайдер И вы можете увидеть живую демонстрацию там слайдера на Priteshgupta.com/demos/templates/vivid-photo/ Миниатюры скользит на мероприятии MouseMove

Затем я немного изменил это, добавив мою пользовательскую функцию для автоматического скольжения миниатюр

  for (var i = 0; i < 1500; i=i+30) {
     $thumbScroller_container.animate({left:-i}, $scrollEasing,$scrollEasingType); 
   }
.

Первоначально это было

$thumbScroller.mousemove(function(e){
        if($thumbScroller_container.width()>sliderWidth){
            var mouseCoords=(e.pageX - $placement[1]);
            var mousePercentX=mouseCoords/sliderWidth;
            var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
            var thePosA=mouseCoords-destX;
            var thePosB=destX-mouseCoords;
            if(mouseCoords>destX){
                $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
            } else if(mouseCoords<destX){
                $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
            } else {
                $thumbScroller_container.stop();  
            }
        }
});
.

Теперь он будет работать, как вы указали в запросе Это изменено предварительный просмотр Ссылка на Demo файл JS, который я отредактировал Страница галереи я отредактировал Если вы хотите получить доступ к любому событию, как нажмите jQuery, вы можете использовать триггер для этого

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top