Подключение slick slider

[sergeymaccar]

Кто нибудь подключал slick slider к opencart 2.3.0.2 ?

 

Если у кого то успешно получилось подскажите пожалуйста

[GreenDragon]

А в чем сложность попробовать? Не знаю какая там сейчас версия слайдера и требование к версии библиотеки jquery. Но думаю работать будет, когда то сам при верстке использовал его, но это было очень давно..

[Einshtein]

Регулярно использую этот слайдер, так как имхо - это самый беспроблемный плагин для слайдера из всех с которыми приходилось работать, Подключается элементарно, работает на последней версии jquery в том числе, имеет настройки для вертикальных слайдов и кучу гибких настроек, в том числе для адаптива
Инструкций в сети полно, если кратко, то :
1) подключаете библиотеку слайдера 
2) подключаете файл стилей
3) подключаете файл с темой (slick-theme.css)
4) инициализируете блок слайдов

$(document).ready(function(){
  $('.блок_со_слайдами).slick({
    setting-name: setting-value //название настройки: значение настройки, через запятую
  });
});

 

[GetWeb]

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

[HyperLabTeam]

@Einshtein попробуй свайпер
https://idangero.us/swiper/

 

в 3,1х встроен

[SooR]

3 часа назад, AWARO сказал:

@Einshtein попробуй свайпер
https://idangero.us/swiper/

 

в 3,1х встроен

125kb в min для простого слайдера - да вы чо. Он больше для лендингов подходит, где один плагин можно повесить на пол страницы.

slick тоже не совсем легкий, 50kb.

[HyperLabTeam]

1 час назад, SooR сказал:

125kb в min для простого слайдера - да вы чо. Он больше для лендингов подходит, где один плагин можно повесить на пол страницы.

slick тоже не совсем легкий, 50kb.

ну так для слайдеров самое то.  и функционален нормально.
есть альтернатива полегче чем теже 50kb ?
да и что мешает позже подгрузить его..

https://www.cat-in-web.ru/samyj-prostoj-slajder-na-jquery/

[sergeymaccar]

Подключаю в header.tpl стили и скрипты

 

потом инициализирую слайдер на странице information в конце пишу

 

$(document).ready(function(){
  $('.блок_со_слайдами).slick({
    setting-name: setting-value //название настройки: значение настройки, через запятую
  });
});

но ничего не происходит

 

На обычной подключал этот слайдер неоднократно, все работало, а на opencart незнаю как правильно подключить

Змінено 16 серпня 2019 користувачем sergeymaccar

[Einshtein]

6 часов назад, AWARO сказал:

@Einshtein попробуй свайпер
https://idangero.us/swiper/

 

в 3,1х встроен

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

[Einshtein]

38 минут назад, sergeymaccar сказал:

Подключаю в header.tpl стили и скрипты

 

потом инициализирую слайдер на странице information в конце пишу

 

$(document).ready(function(){
  $('.блок_со_слайдами).slick({
    setting-name: setting-value //название настройки: значение настройки, через запятую
  });
});

но ничего не происходит

 

На обычной подключал этот слайдер неоднократно, все работало, а на opencart незнаю как правильно подключить

Ну так вы ж думайте что пишите, я пример кода привел, а не готовый копипаст. Вместо ".блок_со_слайдами" - должен быть указан класс или id для инициализации слайдов. Вместо setting-name и setting-value указаны название настройки и сами настройки слайдера. 
Почитайте документацию по подключению, в сети этих инструкций полно, там все примитивно просто если есть хоть малейшее понимание как подключаются плагины. Если нет - не мучайте мертвую корову и обращайтесь в раздел услуг за помощью. 

[Einshtein]

2 часа назад, SooR сказал:

125kb в min для простого слайдера - да вы чо. Он больше для лендингов подходит, где один плагин можно повесить на пол страницы.

slick тоже не совсем легкий, 50kb.

Я бы начал с того, что тогда сам jquery нужно выпиливать из двигла и делать все на чистом js. Плюс ко всему сейчас  модно пихать кучу фреймворков, аля тот же bootstrap. 
Да и в век высокоскоростного интернета 50кб это пшик, когда один только баннер может весить от 100кб. На той же Розетке средний вес страницы 10мб, не лучший пример для подражания в плане оптимизации, но все же это никому не мешает. 

[sergeymaccar]

15 хвилин назад, Einshtein сказав:

Ну так вы ж думайте что пишите, я пример кода привел, а не готовый копипаст. Вместо ".блок_со_слайдами" - должен быть указан класс или id для инициализации слайдов. Вместо setting-name и setting-value указаны название настройки и сами настройки слайдера. 
Почитайте документацию по подключению, в сети этих инструкций полно, там все примитивно просто если есть хоть малейшее понимание как подключаются плагины. Если нет - не мучайте мертвую корову и обращайтесь в раздел услуг за помощью. 

 

причем тут, я тот же пример привел, естественно что я подставляю свои классы,

 

я подлючал неоднократно этот слайдер на других сайтах, не на cms, а на opencart не получается,

 

подключал скрипты и стили в <head>  header.tpl

 

Змінено 16 серпня 2019 користувачем sergeymaccar

[Einshtein]

посмотрите есть ли скрипты в исходном коде страницы - если нет - обновите модификаторы в админке

[SooR]

3 часа назад, Einshtein сказал:

Я бы начал с того, что тогда сам jquery нужно выпиливать из двигла и делать все на чистом js. Плюс ко всему сейчас  модно пихать кучу фреймворков, аля тот же bootstrap. 
Да и в век высокоскоростного интернета 50кб это пшик, когда один только баннер может весить от 100кб. На той же Розетке средний вес страницы 10мб, не лучший пример для подражания в плане оптимизации, но все же это никому не мешает. 

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

Bootstrap с 5-й версии перейдут на чистый. 

Про высокоскоростной интернет - это заблуждение.

Не забывайте про рендер объема скрипта, отжирание ОЗУ вкладки, трафик, мобильный интернет, задержки, pagespeed. Где можно сэкономить - надо экономить.

Розетку даже не приводите  они чуть ли не в штабе Гугл поселились.

Да и посмотрите как она грузится на слабых машинах 2010-2014 годов, что в этом хорошего?

[SooR]

5 часов назад, AWARO сказал:

есть альтернатива полегче чем теже 50kb ?

 

glide - 24 kb 

https://glidejs.com/docs/

 

tiny-slider 2.0 - 31 kb

http://ganlanyuan.github.io/tiny-slider/demo/

[HyperLabTeam]

5 часов назад, SooR сказал:

 

glide - 24 kb 

https://glidejs.com/docs/

 

tiny-slider 2.0 - 31 kb

http://ganlanyuan.github.io/tiny-slider/demo/

а вот тут по ссылке если сваять то ваше нифига не весит))
https://www.cat-in-web.ru/samyj-prostoj-slajder-na-jquery/

[SooR]

10 часов назад, AWARO сказал:

а вот тут по ссылке если сваять то ваше нифига не весит))

Да, и я в свое время писал карусэл, 2012-й год, responsive еще не соблюдался

 

Спойлер

(function($){
  var carousel = {
    init: function(options, element) {
      this.options = $.extend({
        delay: 400,
        visibled: 5,
        scrolled: 5,
        effect: 'slide',
        onInit: function(){},
        onStart: function(){},
        onStop: function(){}
      }, options);

      this.checkOptions();

      this.element = element;

      this.box = {
        prev: $('.carousel-prev', element),
        next: $('.carousel-next', element),

        container: $('.carousel-container', element),
        ul: $('ul', element),
        li: $('li', element)
      };

      this.transitionCSS = {
        'transition': 'all ' + this.options.delay + 'ms ease-in-out'
      };

      if (this.options.effect == 'slide') {
        this.box.animated = this.box.ul.css(this.transitionCSS);
      } else {
         this.options.scrolled = this.options.visibled;

        this.box.animated = this.box.li.css(this.transitionCSS);
      }

      this.liCount = this.box.li.length;
      this.liLeft = 0;

      this.getWidth().setWidth().setControlsStatus().initEvents().options.onInit.apply(this);
    },

    initEvents: function() {
      var $this = this;

      $(window).resize(function(e) {
        $this.getWidth().setWidth();
      });

      this.box.next.on('click', function(e) {
        $this.action('next');

        return false;
      });

      this.box.prev.on('click', function(e) {
        $this.action('prev');

        return false;
      });

      this.box.animated.on('transitionend', function(){ $this.options.onStop($this); });

      return this;
    },

    action: function(direction) {
      if (this.options.effect == 'slide') {
        this.calculateLeft(direction).effect.slide.call(this);
      } else if (this.options.effect == 'fade') {
        this.calculateLeft(direction).effect.fade.call(this);
      }
    },

    calculateLeft: function(direction) {
      if (direction == 'prev') {
        if (this.liLeft < 0) {
          if (this.liLeft + this.options.scrolled <= 0) {
            this.liLeft += this.options.scrolled;
          } else {
            this.liLeft += Math.abs(this.liLeft);
          }

          this.options.onStart(this);
        }
      } else {
        if (Math.abs(this.liLeft) + this.options.visibled < this.liCount) { /* if not end of carousel */
          if (Math.abs(this.liLeft) + this.options.visibled + this.options.scrolled < this.liCount) {
            this.liLeft -= this.options.scrolled;
          } else {
            this.liLeft -= this.liCount - (Math.abs(this.liLeft) + this.options.visibled);
          }

          this.options.onStart(this);
        }
      }

      this.setControlsStatus().left = this.liLeft * this.width.li;

      return this;
    },

    setControlsStatus: function() {
      if (this.liLeft == 0) {
        this.box.prev.addClass('disabled');
      } else {
        this.box.prev.removeClass('disabled');
      }

      if ((Math.abs(this.liLeft) + this.options.visibled == this.liCount) || this.liCount <= this.options.visibled) {
        this.box.next.addClass('disabled');
      } else {
        this.box.next.removeClass('disabled');
      }

      return this;
    },

    effect: {
      slide: function() {
        this.box.ul.css({'margin-left': this.left});

        return this;
      },

      fade: function() {
        var $this = this, visibled = this.box.li.slice(Math.abs(this.liLeft) - this.options.visibled, Math.abs(this.liLeft)),
                          nexts = this.box.li.slice(Math.abs(this.liLeft), Math.abs(this.liLeft) + this.options.visibled).css({opacity: 0});;

        visibled.each(function(i, li) {
          setTimeout(function() {
            $(li).css({opacity: 0});

            if ($this.options.visibled == i + 1) {
              setTimeout(function() {
                $this.box.ul.css({'margin-left': $this.left});

                nexts.each(function(i, li) {
                  setTimeout(function() {
                    $(li).css({opacity: 1});
                  }, $this.options.delay * i);
                });
              }, $this.options.delay);
            }
          }, $this.options.delay * i);
        });
      }
    },

    getWidth: function() {
       var hidden = false;

      if (this.element.is(':hidden')) {
        this.element.css('display', 'block');

         hidden = true;
      }

      this.width = {
        carousel: this.element.width(),
        container: this.box.container.width()
      };

      this.width.li = this.width.container / this.options.visibled;

      this.element.show();

      if (hidden) {
        this.element.removeAttr('style');
      }

      return this;
    },

    setWidth: function() {
      this.box.li.css({width: this.width.li});
      this.box.ul.css({'margin-left': this.liLeft * this.width.li});

      return this;
    },

    checkOptions: function() {
      if ('function' != typeof this.options.onInit) {
        this.options.onInit = function(){};
      }

      if ('function' != typeof this.options.onStart) {
        this.options.onStart = function(){};
      }

      if ('function' != typeof this.options.onStop) {
        this.options.onStop = function(){};
      }

      return this;
    }
  };

  /* IE6+ */
  if (Object.create === undefined) {
    Object.create = function(object) {
      function f(){};
      f.prototype = object;
      return new f();
    };
  }

  $.fn.carousel = function(options) {
    return this.each(function(){
      var $this = $(this);

      if ($this.data('carousel')) {
        return $this.data('carousel');
      }

      $this.data('carousel', Object.create(carousel).init(options, $this));
    });
  };
})(jQuery);