Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167

Скролинг объектов в блоке

21.11.2015, 20:40. Показов 895. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!
Пытаюсь разобраться, как присваивается стиль прокрутки объектов в блоке, пока что то безрезультатно(
Хочу сделать, что бы в блоке когда прокручивались элементы и доходило до последнего, не возвращалось резко все к первому объекту, а скролило по кругу.

Подскажите пожалуйста, как решить проблему

Скрин прикрепляю со структурой
Миниатюры
Скролинг объектов в блоке  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.11.2015, 20:40
Ответы с готовыми решениями:

Скролинг на JS
Как сделать чтобы при скролле 250px пользователь сразу перемещался на 768px вниз? Вот верстка :) <!DOCTYPE html> <html...

Не работает плавный скролинг
Помогите разобратся в чём может быть причина что не работает скролинг? <div class="small-2 columns "> <a...

Как редактировать скролинг вниз?
При клике на кнопку меню контакты страница настолько далеко скролится вниз что футер(и вообще почти вся страница ) сдвигается вверх. ...

12
27 / 28 / 16
Регистрация: 18.10.2015
Сообщений: 187
22.11.2015, 02:27
Вы сами писали плагин или используете сторонний?
Если сторонний, то в просторах интернета должен быть плагин под ваши нужды...
Чтобы не изобретать велосипед...
0
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167
22.11.2015, 13:09  [ТС]
сторонний плагин
та я так понимаю, там особо и изобретать ничего не нужно, поменять стиль прокрутки и все,... или все таки ошибаюсь?
0
27 / 28 / 16
Регистрация: 18.10.2015
Сообщений: 187
22.11.2015, 14:44
Если в документации указан подходящий стиль прокрутки, если нет то искать нужно или самому реализовывать
0
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167
22.11.2015, 16:48  [ТС]
доков нет
а с чего начать? где рыть нужно, не подскажете?

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

Java
1
2
3
4
5
6
7
8
9
10
11
12
buildControls:function(){if(!0===this.options.navigation||!0===this.options.pagination)this.owlControls=f('<div class="owl-controls"/>').toggleClass("clickable",!this.browser.isTouch).appendTo(this.$elem);!0===this.options.pagination&&this.buildPagination();!0===this.options.navigation&&this.buildButtons()},buildButtons:function(){var a=this,b=f('<div class="owl-buttons"/>');a.owlControls.append(b);a.buttonPrev=
f("<div/>",{"class":"owl-prev",html:a.options.navigationText[0]||""});a.buttonNext=f("<div/>",{"class":"owl-next",html:a.options.navigationText[1]||""});b.append(a.buttonPrev).append(a.buttonNext);b.on("touchstart.owlControls mousedown.owlControls",'div[class^="owl"]',function(a){a.preventDefault()});b.on("touchend.owlControls mouseup.owlControls",'div[class^="owl"]',function(b){b.preventDefault();f(this).hasClass("owl-next")?a.next():a.prev()})},buildPagination:function(){var a=this;a.paginationWrapper=
f('<div class="owl-pagination"/>');a.owlControls.append(a.paginationWrapper);a.paginationWrapper.on("touchend.owlControls mouseup.owlControls",".owl-page",function(b){b.preventDefault();Number(f(this).data("owl-page"))!==a.currentItem&&a.goTo(Number(f(this).data("owl-page")),!0)})},updatePagination:function(){var a,b,e,c,d,g;if(!1===this.options.pagination)return!1;this.paginationWrapper.html("");a=0;b=this.itemsAmount-this.itemsAmount%this.options.items;for(c=0;c<this.itemsAmount;c+=1)0===c%this.options.items&&
(a+=1,b===c&&(e=this.itemsAmount-this.options.items),d=f("<div/>",{"class":"owl-page"}),g=f("<span></span>",{text:!0===this.options.paginationNumbers?a:"","class":!0===this.options.paginationNumbers?"owl-numbers":""}),d.append(g),d.data("owl-page",b===c?e:c),d.data("owl-roundPages",a),this.paginationWrapper.append(d));this.checkPagination()},checkPagination:function(){var a=this;if(!1===a.options.pagination)return!1;a.paginationWrapper.find(".owl-page").each(function(){f(this).data("owl-roundPages")===
f(a.$owlItems[a.currentItem]).data("owl-roundPages")&&(a.paginationWrapper.find(".owl-page").removeClass("active"),f(this).addClass("active"))})},checkNavigation:function(){if(!1===this.options.navigation)return!1;!1===this.options.rewindNav&&(0===this.currentItem&&0===this.maximumItem?(this.buttonPrev.addClass("disabled"),this.buttonNext.addClass("disabled")):0===this.currentItem&&0!==this.maximumItem?(this.buttonPrev.addClass("disabled"),this.buttonNext.removeClass("disabled")):this.currentItem===
this.maximumItem?(this.buttonPrev.removeClass("disabled"),this.buttonNext.addClass("disabled")):0!==this.currentItem&&this.currentItem!==this.maximumItem&&(this.buttonPrev.removeClass("disabled"),this.buttonNext.removeClass("disabled")))},updateControls:function(){this.updatePagination();this.checkNavigation();this.owlControls&&(this.options.items>=this.itemsAmount?this.owlControls.hide():this.owlControls.show())},destroyControls:function(){this.owlControls&&this.owlControls.remove()},next:function(a){if(this.isTransition)return!1;
this.currentItem+=!0===this.options.scrollPerPage?this.options.items:1;if(this.currentItem>this.maximumItem+(!0===this.options.scrollPerPage?this.options.items-1:0))if(!0===this.options.rewindNav)this.currentItem=0,a="rewind";else return this.currentItem=this.maximumItem,!1;this.goTo(this.currentItem,a)},prev:function(a){if(this.isTransition)return!1;this.currentItem=!0===this.options.scrollPerPage&&0<this.currentItem&&this.currentItem<this.options.items?0:this.currentItem-(!0===this.options.scrollPerPage?
this.options.items:1);if(0>this.currentItem)if(!0===this.options.rewindNav)this.currentItem=this.maximumItem,a="rewind";else return this.currentItem=0,!1;this.goTo(this.currentItem,a)},goTo:function(a,b,e){var c=this;if(c.isTransition)return!1;"function"===typeof c.options.beforeMove&&c.options.beforeMove.apply(this,[c.$elem]);a>=c.maximumItem?a=c.maximumItem:0>=a&&(a=0);c.currentItem=c.owl.currentItem=a;if(!1!==c.options.transitionStyle&&"drag"!==e&&1===c.options.items&&!0===c.browser.support3d)return c.swapSpeed(0),
!0===c.browser.support3d?c.transition3d(c.positionsInArray[a]):c.css2slide(c.positionsInArray[a],1),c.afterGo(),c.singleItemTransition(),!1;a=c.positionsInArray[a];!0===c.browser.support3d?(c.isCss3Finish=!1,!0===b?(c.swapSpeed("paginationSpeed"),g.setTimeout(function(){c.isCss3Finish=!0},c.options.paginationSpeed)):"rewind"===b?(c.swapSpeed(c.options.rewindSpeed),g.setTimeout(function(){c.isCss3Finish=!0},c.options.rewindSpeed)):(c.swapSpeed("slideSpeed"),g.setTimeout(function(){c.isCss3Finish=!0},
c.options.slideSpeed)),c.transition3d(a)):!0===b?c.css2slide(a,c.options.paginationSpeed):"rewind"===b?c.css2slide(a,c.options.rewindSpeed):c.css2slide(a,c.options.slideSpeed);c.afterGo()},jumpTo:function(a){"function"===typeof this.options.beforeMove&&this.options.beforeMove.apply(this,[this.$elem]);a>=this.maximumItem||-1===a?a=this.maximumItem:0>=a&&(a=0);this.swapSpeed(0);!0===this.browser.support3d?this.transition3d(this.positionsInArray[a]):this.css2slide(this.positionsInArray[a],1);this.currentItem=
this.owl.currentItem=a;this.afterGo()},afterGo:function(){this.prevArr.push(this.currentItem);this.prevItem=this.owl.prevItem=this.prevArr[this.prevArr.length-2];this.prevArr.shift(0);this.prevItem!==this.currentItem&&(this.checkPagination(),this.checkNavigation(),this.eachMoveUpdate(),!1!==this.options.autoPlay&&this.checkAp());"function"===typeof this.options.afterMove&&this.prevItem!==this.currentItem&&this.options.afterMove.apply(this,[this.$elem])},stop:function(){this.apStatus="stop";g.clearInterval(this.autoPlayInterval)},
checkAp:function(){"stop"!==this.apStatus&&this.play()},play:function(){var a=this;a.apStatus="play";if(!1===a.options.autoPlay)return!1;g.clearInterval(a.autoPlayInterval);a.autoPlayInterval=g.setInterval(function(){a.next(!0)},a.options.autoPlay)},
0
27 / 28 / 16
Регистрация: 18.10.2015
Сообщений: 187
22.11.2015, 16:51
У вас только min.js есть или можете полную версию просмотреть.
Если доков нет то в js посмотреть какие опции есть например через расширение extend(... options)

Какие есть по default и какие значения принимают.
В частности по эффектам скролирования могут быть horizontal, fade, vertical и пр.
0
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167
23.11.2015, 15:13  [ТС]
вот что нашел по слову extend в полном файле

Java
1
2
3
4
5
6
7
8
9
10
var Carousel = {
        init : function (options, el) {
            var base = this;
 
            base.$elem = $(el);
            base.options = $.extend({}, $.fn.owlCarousel.options, base.$elem.data(), options);
 
            base.userOptions = options;
            base.loadContent();
        },
Java
1
2
3
4
5
6
reinit : function (newOptions) {
            var base = this,
                options = $.extend({}, base.userOptions, newOptions);
            base.unWrap();
            base.init(options, base.$elem);
        },
но я когда пересматривал полную версию файла, нашел много чего вроде как касающегося пагинации,.. но поскольку в программировании особо не понимаю, могу и ошибаться

http://www.ex.ua/965598142063 - вот полная версия файла, сюда не влез)
0
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
23.11.2015, 15:42
В 2-ой версии http://www.owlcarousel.owlgraphic.com зацикливание, похоже, идет по умолчанию.
0
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167
23.11.2015, 16:22  [ТС]
сделал подмену файлов, все перестало работать...
не подскажете где капнуть и заменить?
0
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167
26.11.2015, 21:39  [ТС]
пожалуйста, ну помогите а?(
0
0 / 0 / 0
Регистрация: 20.11.2015
Сообщений: 15
26.11.2015, 23:19
стили кнопок изменяются в файле owl.theme.default.min.css
что бы слайды не скролились по кругу надо было изменить в скрипте loop: true НА loop: false.
пример в файлике..
Вложения
Тип файла: 7z Новая папка.7z (60.0 Кб, 3 просмотров)
0
0 / 0 / 0
Регистрация: 20.11.2015
Сообщений: 15
26.11.2015, 23:25
а так скрит слайдера бета версия...я бы поискал что нибуть более стабильное..http://designscrazed.org/free-... e-sliders/
0
 Аватар для maximamus
5 / 0 / 2
Регистрация: 12.01.2010
Сообщений: 167
27.11.2015, 00:25  [ТС]
а как в css файле могут быть такие значения?)

Добавлено через 2 минуты
и если бы я еще понимал, как его заменить...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
27.11.2015, 00:25
Помогаю со студенческими работами здесь

автоматически скролинг внизу 200 пикселеи
здравствуите как сделать такое с помошчю js или jquery : есть високая документ, после нажатии миши на какоита определённом елементе,...

Не работает автоматический скролинг вниз страницы.
Я делаю автоматический скролинг в низ страницы на жабе var scroll = document.getElementById(&quot;info&quot;); scroll.scrollTop =...

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

Запретить скролинг страницы
На страницу подключил fancybox для картинок: &lt;a data-fancybox-group=&quot;button&quot; class=&quot;fancybox-buttons&quot; href=&quot;1.png&quot;&gt; ...

Изменение в одном блоке при нажатии в другом блоке
Скажите возможно ли с помощью CSS или HTML(что мало вероятно) сделать так чтобы если я навожу(щелкаю) на(по) ссылке в одном блоке...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru