Новости Joomla

Joomla 4 – шаблон Cassiopeia – советы и хитрости

Обзор возможностей шаблона по умолчанию Joomla 4 - Cassiopeia, а так же советы по кастомизации. Демонстрация доступности сайта для слабовидящих, соответствущей международным стандартам (WCAG 2.1) и их российским аналогам (ГОСТ Р 52872-2019). Анонс некоторых новых функций Joomla 4.1.

WT On fly image handler - бесплатный плагин обработки изображений товара JoomShopping

WT On fly image handler - бесплатный плагин обработки изображений товара JoomShopping при редактировании: одинаковые пропорции, конвертация в один формат (JPG, PNG, GIF, WEBP), удаление прозрачности, именование файлов. Используется библиотека Intervention Image.

Вышел релиз Joomla 4.1 RC1

Проект Joomla рад сообщить о выпуске Joomla! CMS 4.1 RC1.

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 6 Ответов
  • 357 Просмотров
*

spro1

  • Осваиваюсь на форуме
  • 29
  • 0 / 0
Карусель на jquery
« : 25.02.2021, 18:46:13 »
Всем привет!

Вопрос наверное совсем простой, но знаете, вот не смог найти ну никак((

Нужна карусель на jquery вот такого вида, как на этом сайте: https://www.life-line.ru/

Несколько раз пытался найти и не нашел.
Помогите, пожалуйста.
И простите за глупый вопрос)

Записан
*

spro1

  • Осваиваюсь на форуме
  • 29
  • 0 / 0
Re: Карусель на jquery
« Ответ #1 : 25.02.2021, 20:39:12 »
уточню вопрос, нужен просто скрипт, а не компоненты/модули для Joomla
Записан
*

beliyadm

  • Легенда
  • 9634
  • 1658 / 66
  • Севастополь == Россия
Re: Карусель на jquery
« Ответ #2 : 26.02.2021, 06:25:09 »
Slick?

Пример https://happybridal.ru/about/turnkey (третий блок с "основные задачи блабла ")
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

spro1

  • Осваиваюсь на форуме
  • 29
  • 0 / 0
Re: Карусель на jquery
« Ответ #3 : 27.02.2021, 00:11:58 »
На slik я в первую очередь и думал, отличный слайдер.
Сначала думал, что не сделать на нем, а после вашего совета поразбирался и все получилось)
на 99% все, что хотелось, удалось.

Благодарю! И слава slick слайдеру в очередной раз)

Записан
*

beliyadm

  • Легенда
  • 9634
  • 1658 / 66
  • Севастополь == Россия
Re: Карусель на jquery
« Ответ #4 : 27.02.2021, 00:18:19 »
Цитата: spro1 от 27.02.2021, 00:11:58
Сначала думал, что не сделать на нем, а после вашего совета поразбирался и все получилось)
на 99% все, что хотелось, удалось.
Это хорошо, что получилось. Но по негласным правилам форума - хорошим тоном считается выложить решение.
Как у вас получилось (можно без примера, просто код). Не все же будут разбираться в моем примере (как так там сделано).
Но это просто рекомендация, нужно делиться решениями
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

Septdir

  • Живу я здесь
  • 3370
  • 168 / 4
Re: Карусель на jquery
« Ответ #5 : 27.02.2021, 02:53:56 »
Цитата: spro1 от 27.02.2021, 00:11:58
Благодарю! И слава slick слайдеру в очередной раз)
Dependencies
jQuery 1.7
Не не не девид блейн, только не в 2021 году.
Записан
Не можете справиться с задачей сами пишите, решу ее за вас, не бесплатно*.
*Интересная задача, Деньги или Бартер. Натурой не беру!
CodersRank | Контакты | Мой GitHub | Workshop
*

spro1

  • Осваиваюсь на форуме
  • 29
  • 0 / 0
Re: Карусель на jquery
« Ответ #6 : 01.03.2021, 11:13:06 »
Решение такое:

Для начала выводим слайды с такими настройками slick слайдера
Код
			$('.slider-cards .slider-items').slick({
				dots: false,
				arrows: true,
				infinite: true,
				speed: 500,
				centerMode: false,
				slidesToShow: 3,
				slidesToScroll: 1,	
			});

Далее вывел для тестов в содержимое слайда только картинку.

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

Код
       .slick-list {
              overflow: unset !important;
              .slick-track {
                     width: 100% !important;
                     left: 0 !important;
                     right: 0 !important;
                     transform: none !important;
                     height: 545px;
                     @media (max-width: @screen-sm-max) {
                            height: 485px;
                     }
                     @media (max-width: @screen-sm-max) {
                            height: 510px;
                     }
              }
       }
       .slick-slide {
              opacity: 0;
              transition: all 0.4s;
              position: absolute !important;
              height: auto !important;
              width: 100% !important;
              z-index: 11 !important;
              transform: rotateY(0deg) translateX(-20%) scale(1.2)!important;
              pointer-events: none;
       }
       .slick-active {
              opacity: 1;
              transition: all 0.4s;
              z-index: 10 !important;
              transform: rotateY(0deg) translateX(0%)!important;
              &.slick-current {
                     pointer-events: all;
                     .item-desc {
                            opacity: 1;
                            transition-delay: 0.3s;
                            transition-duration: 0.3s;
                     }
              }
              + .slick-slide {
                     z-index: 9 !important;
                     transform: rotateY(0deg) translateX(20%) scale(0.8)!important;
              }
              + .slick-slide + .slick-slide {
                     z-index: 8 !important;
                     transform: rotateY(0deg) translateX(40%) scale(0.6)!important;
              }
              + .slick-slide + .slick-slide + .slick-slide {
                     z-index: 7 !important;
                     transform: rotateY(0deg) translateX(60%) scale(0.4)!important;
                     opacity: 0;
              }
       }
       .slick-prev,
       .slick-next {
              height: 40px !important;
              width: 40px !important;
              top: -49px !important;
              background: @color2 !important;
              &:hover {
                     background: @color2-hov !important;
              }
       }
       .slick-prev::before,
       .slick-next::before {
              font-size: 13px !important;
              color: #fff !important;
       }
       .slick-next {
              right: 20%;
              margin-right: -115px;
              border-radius: 0 4px 4px 0 !important;
       }
       .slick-prev {
              left: 110%;
              margin-left: -130px;
              border-radius: 4px 0 0 4px !important;
       }
       .slick-dots {
              bottom: -30px;
       }

Вообще слайдер можно взять и другой, просто в моем случае slick оказался удобнее, так как на нем и другие слайдеры на сайте сделаны.
В основе свойство transform
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Карусель

Автор surho

 Ответов: 0
Просмотров: 428 		Последний ответ 10.09.2019, 01:27:33
от surho
Модуль карусель - меню

Автор ROMERO

 Ответов: 4
Просмотров: 863 		Последний ответ 07.04.2018, 17:03:00
от ROMERO
Карусель товаров vm3

Автор Dromaf

 Ответов: 2
Просмотров: 1080 		Последний ответ 06.09.2017, 11:24:19
от Dromaf
Нашел обалденный 3d слайдер-карусель, но нужна помощь

Автор hurik

 Ответов: 2
Просмотров: 820 		Последний ответ 01.08.2017, 10:53:13
от Septdir
Видео-слайдер/карусель

Автор mlukyanov

 Ответов: 2
Просмотров: 1778 		Последний ответ 28.06.2017, 15:02:39
от vipiusss