• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Как изменить слайдер в шаблоне Kinopchel?
evgen4ik
Вторник, 06 Июля 2021, 09:49 | Сообщение 1
Оффлайн
Пользователи
Сообщений:5
Награды: 0
Здравствуйте, я скачал у Вас на сайте шаблон Kinopchel и мне надо что бы картинки в нем были выкинутые не по вертикали как тут:



а вот так вот:



я уже все перелазил все что можно изменил но без безрезультатно у меня ширина не меняется и получается только так:



Сайт: cs-new.ucoz.net

Извините код, не соберу, его из шаблона вытаскивать я не особо в коде.
Прикрепления: 6984981.png (69.5 Kb) · 6301211.png (62.7 Kb) · 1730293.png (57.9 Kb)
Страна: (RU)
evgen4ik
Вторник, 06 Июля 2021, 10:14 | Сообщение 2
Оффлайн
Пользователи
Сообщений:5
Награды: 0
Нашол коечто. Там есть файл .js в нем есть стил который отвечает за слайдер:

Код
$("#owl-carou").owlCarousel({    
   navigation : true,
   navigationText: [
     "<i class='fa fa-chevron-left'></i>",
     "<i class='fa fa-chevron-right'></i>"
     ],
   slideSpeed : 300,
   paginationSpeed : 400,
   singleItem:false,
   itemsCustom: [[0, 2], [470, 3], [590, 3], [760, 4], [950, 6], [1220, 7]],
   autoPlay:false,
   pagination: false,
   lazyLoad : true
  });


Когда удоляю строчку:

Код
    itemsCustom: [[0, 2], [470, 3], [590, 3], [760, 4], [950, 6], [1220, 7]],


Встает все вот так:



Впринципе мне так и надо, но может кто обяснить что к чему этой строчке? Что бы ее не удолять а изменить под себя. 50a
Прикрепления: 2475824.png (77.2 Kb)
Страна: (RU)
Kosten
Вторник, 06 Июля 2021, 10:33 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вот стиль, который отвечает за размер.

Код
.carou {
    display: block;
    height: 198px;
    max-width: 145px;
    margin: 0 5px;
}


Вот как получилось



Что можно одно изображение добавить и потом этим стилей все настроить.
Прикрепления: 9414513.png (453.8 Kb)
Страна: (RU)
Kosten
Вторник, 06 Июля 2021, 10:44 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вот так попробуйте поставить стили, точнее сменить на эти, здесь данные размеры изменены, и вот как получилось.

Код
.carou {
    display: block;
    height: 220px;
    max-width: 170px;
    margin: 0 5px;
}


Прикрепления: 8717696.png (561.5 Kb)
Страна: (RU)
evgen4ik
Вторник, 06 Июля 2021, 10:47 | Сообщение 5
Оффлайн
Пользователи
Сообщений:5
Награды: 0
это я разобрался, я вот и говорю изменяю под себя получаеться так:


Но когда я ставлю строчку:
Код
    itemsCustom: [[0, 2], [470, 3], [590, 3], [760, 4], [950, 6], [1220, 7]],

обратно в .js файл он становится вот таким:

Прикрепления: 1534169.png (65.4 Kb) · 3205727.png (59.7 Kb)
Страна: (RU)
Kosten
Вторник, 06 Июля 2021, 10:47 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Или так, где по ширине мы ставим автоматическую ширину 100% и остается выставить длину картинки.

Код
.carou {
    display: block;
    height: 210px;
    max-width: 100%;
    margin: 0 5px;
}
Страна: (RU)
Сопрано
Вторник, 06 Июля 2021, 11:01 | Сообщение 7
Оффлайн
Vip
Сообщений:461
Награды: 4
Fed1312, не лести в js, это больше функции, дизайн выстраивается в CSS.

Не могу найти аналогичный шаблон, который уже установлен под сайт, и в истории нет сохранение.
Страна: (RU)
evgen4ik
Вторник, 06 Июля 2021, 11:20 | Сообщение 8
Оффлайн
Пользователи
Сообщений:5
Награды: 0
Понял походу. Это тип адаптация по икраны.
Код
    itemsCustom: [[0, 2], [470, 3], [590, 3], [760, 4], [950, 6], [1220, 7]],

Ставлю так:
Код
    itemsCustom: [[0, 2], [470, 3], [590, 3], [760, 4], [950, 4], [1220, 5]],

И они выставляются по 5 или 4 и норм.

Добавлено (2021-07-06, 11:21)
---------------------------------------------
Окно меньше в слайдере файлов меньше.

Страна: (RU)
Kosten
Вторник, 06 Июля 2021, 18:05 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Так разобрались?
И аналогично можно стилями поправить.
Страна: (RU)
evgen4ik
Вторник, 06 Июля 2021, 22:21 | Сообщение 10
Оффлайн
Пользователи
Сообщений:5
Награды: 0
Думаю да, спасибо большое.
Вы про эти стили ?
Код
.carou {
    display: block;
    height: 210px;
    max-width: 100%;
    margin: 0 5px;
}
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: