• Страница 1 из 1
  • 1
Форум » Веб-разработка » Вопросы по uCoz » Как сделать слайдеру переключатель изображение (Доработать адаптивный слайдер)
Как сделать слайдеру переключатель изображение
Kosten
Дата: Вторник, 2019-03-26, 20:24 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


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



Вот с этого сайта слайдер: https://u.to/SZ-uDQ
Прикрепления: 8401054.jpg(83.8 Kb)
Страна: (RU)
First
Дата: Вторник, 2019-03-26, 20:40 | Сообщение 2
Оффлайн
Гл. Модератор
Сообщений:816
Награды: 4


Kosten, к нему в довесок
Код

var carPos = 30;
var t;
var a;
var kuda;
function MoveMePlease(kuda) {
    if (kuda == 1) {
  document.getElementById('mr');
  if (carPos >= -1330) {
   t=setTimeout("MoveMePlease(1)", 40);
   carPos=carPos-15;
   writer(carPos);
  } else { clearTimeout(t); }
    }
    else if (kuda == 0) {
  document.getElementById('ml');
  if (carPos <= -10) {
   a=setTimeout("MoveMePlease(0)", 40);
   carPos=carPos+15;
   writer(carPos);
  } else { clearTimeout(a); }
    }
}
function cleaner() { clearTimeout(a); clearTimeout(t);
    document.getElementById('mr').style.width = ''; document.getElementById('ml').style.width = '';
    }
function writer(newPos) { document.getElementById('sliderblockbox').style.left = newPos+'px'; }



Сообщение отредактировал
First - Вторник, 2019-03-26, 20:42
Страна: (GB)
Kosten
Дата: Вторник, 2019-03-26, 20:48 | Сообщение 3
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


First, вот от души.

Здесь сразу ссылки прописываем на изображение и переход?
Страна: (RU)
First
Дата: Вторник, 2019-03-26, 20:49 | Сообщение 4
Оффлайн
Гл. Модератор
Сообщений:816
Награды: 4


Цитата Kosten ()
Здесь сразу ссылки прописываем на изображение и переход?

Ну я сам слайдер не смотрел, просто заглянул в libs и взял кусочек от туда 11a


Сообщение отредактировал
First - Вторник, 2019-03-26, 20:50
Страна: (GB)
First
Дата: Вторник, 2019-03-26, 20:53 | Сообщение 5
Оффлайн
Гл. Модератор
Сообщений:816
Награды: 4


Лучше информером прописать и операторами. Намного удобнее и не нужно каждый раз в панели править
Страна: (GB)
Kosten
Дата: Вторник, 2019-03-26, 20:55 | Сообщение 6
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Цитата First ()
Лучше информером прописать и операторами. Намного удобнее и не нужно каждый раз в панели править

Но если есть желание, замути 09a

А пока так залью как материал.
Страна: (RU)
First
Дата: Вторник, 2019-03-26, 21:04 | Сообщение 7
Оффлайн
Гл. Модератор
Сообщений:816
Награды: 4


Там где слайдер будет
Код
<div id="sliderblock">
<div id="sliderblockbox" style="left: -1320px;">
$MINF_X$
</div>
<div style="" onmouseover="MoveMePlease(1)" onmouseout="cleaner()" id="mr" class="right"><img src="http://kinozombi.clan.su/images/moveR.png" alt="" style="cursor: pointer;"></div>
<div style="" onmouseover="MoveMePlease(0)" onmouseout="cleaner()" id="ml" class="left"><img src="http://kinozombi.clan.su/images/moveL.png" alt="" style="cursor: pointer;"></div>
</div>


Ну и скрипт тот, что выше рядом, а можно к остальным скриптам в файл

Ну и в информер код и при создании выбираем количество выводимых материалов на усмотрение, ну 20 к примеру
Код
<a href="$ENTRY_URL$"> <span>$TITLE$</span> <img src="$IMG_URL1$" style="width: 152px; height: 211px" alt="$TITLE$" title="$TITLE$"> </a>


Сообщение отредактировал
First - Вторник, 2019-03-26, 21:05
Страна: (GB)
Kosten
Дата: Вторник, 2019-03-26, 22:33 | Сообщение 8
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


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

First, пожалуйста кратко можешь полную установку здесь прописать, чтоб не запутаться.
Страна: (RU)
Kosten
Дата: Среда, 2019-03-27, 12:04 | Сообщение 9
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


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

Прикрепления: 7442499.jpg(73.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Вопросы по uCoz » Как сделать слайдеру переключатель изображение (Доработать адаптивный слайдер)
  • Страница 1 из 1
  • 1
Поиск: