ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Простой слайдер картинок и контента

Сообщений 1 страница 10 из 25

1

Простой Слайдер картинок и контента
https://forumupload.ru/uploads/0007/e3/f7/6822/96559.png

Автор: Deff
Платформа: любая

Основные достоинста данных слайдеров:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта(необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска
Быстрый запуск.

В HTML верх

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Туда, где нужен слайдер

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

настройка

slider2 - красным жирным - уникальный id cлайдера(*прописывается дважды в начале и  конце),
если слайдеров несколько, для каждого свой

<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">  - красным: прописываем свои цифры ширины и высоты слайдера;
padding:0 - отступ контента от краёв, обычно при вставке фоновой картинки вместо 0 - прописываем 12px

    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>

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

Очередную вкладку слайдера добавляем таким кодом:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Красное - Ваш контент

Возможность смены направления движения и времени анимации слайда:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1
Вторая цифра примерно от 0 до 800, - время анимации кадра

Вариант Кольцевого слайдера с возможностью автопрокрутки слайдов:
Установка та же самая, изменения в назначении параметров запуска функции.
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(660,4);</script>
1-я цифра: примерно от 0 до 800 - время анимации кадра
2-я цифра: время автопрокрутки в секундах (от 1 до 10) (Если параметр не устанавливаем, - автопрокрутки нет.)

ВНИМАНИЕ! Для  кольцевого слайдера меняем в HTML верх строку:

<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>
    на
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

Можно установить свои добавки стиля к мини-меню прокрутки:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Добавлена возможность смены направления движения и времени анимации слайда:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1

Вторая цифра примерно от 0 до 800, - время анимации кадра


Добавлен новый Вариант Кольцевого слайдера, с возможностью автопрокрутки слайдов:
Установка та же самая, изменения в назначении параметров запуска функции:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(660,4);</script>

1-я цифра - цифра примерно от 0 до 800, - время анимации кадра
2-я цифра, 4 - время автопрокрутки в секундах(от 1 до 10), (Если параметр не устанавливаем, - автопрокрутки нет.
Для  кольцевого слайдера меняем в HTML верх строку

<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>

на

<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

Можно установить свои добавки стиля к мини-меню прокрутки

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

2

Здравствуйте!
Подскажите, пожалуйста, можно ли как-то прикрутить reverse_ ко второй (цикличной) версии слайдера?
Либо реализовать запуск слайдера не с первого контент-элемента, а со второго/третьего/etc в первой (не цикличной) версии?
Заранее большое спасибо за ответ.

0

3

Nunnaly написал(а):

Либо реализовать запуск слайдера не с первого контент-элемента, а со второго/третьего/etc в первой (не цикличной) версии?

http://uploads.ru/i/R/j/9/Rj9lU.gif  А просто переставить контент слайдов в обратном порядке - не спасает ? Будет эффект почти тот

Отредактировано Deff (26.01.14 11:36)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

4

Deff
циклический как раз и подходит удачно именно за счет того, что контент переставлен)) Но там не работает reverse, а без него грустно. Пыталась на основе первого js-файла допилить второй - и что-то как-то больше все поломала, нежели заставила работать, как душе моей хочется((

0

5

Nunnaly
Что есть реверс ? Поясните в картинках

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

6

Герда написал(а):

Первая цифра - смена направления - 0 или 1

Речь об этой функции. В js-файле этот параметр обозначен как reverse_ и обрабатывается в отдельном блоке, который, собственно, отражает анимацию.

В https://forumstatic.ru/files/0010/b4/f8/78275.js это:

Код:
   // Реверс хода //
  if(!(revers_)) {
    W=-W; b.each(function(){$(this).prependTo(train)});
    train.css({'margin-left':''+(margTst()-W*(indMax-1))+'px'});
  }

В циклическом случае этих строчек кода нет и отразить анимацию пока не очень понятно, как :)

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

0

7

Nunnaly
Лениво, - в принципе в нормальных слайдерах картинка всегда движется вправо, смысл в реверсе? Ну не могу понять актуальность, мон конечно напрячься и сделать инверсию
Но приверженность непонятна... иное дело реализация круга - покадровым сдвигом вправо до конца и быстрый возврат влево...
Но один фиг не пому - зачем?

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

8

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

Отредактировано Deff (26.01.14 17:56)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

9

Deff, я пытаюсь организовать с помощью этого слайдера календарь) И реверс хочется исключительно из соображений привычки, что есть, то есть )))

0

10

Подскажите, пожалуйста, как бы так сделать, чтобы картинки были на всю ширину рамки?
И чтобы было как в шапке тут на ФД - такие точки-переключалки на каждый слайд с плавным переходом и автосмена картинок. Поставил, но чот не работает.
Тут: http://brightsofseconds.rolebb.ru/

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

0