Jump to content

Recommended Posts

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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


 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
3 часа назад, AWARO сказал:

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

 

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

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

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

Share this post


Link to post
Share on other sites
1 час назад, SooR сказал:

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

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

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


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

Share this post


Link to post
Share on other sites
Posted (edited)

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

 

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

 

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

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

 

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

Edited by sergeymaccar

Share this post


Link to post
Share on other sites
6 часов назад, AWARO сказал:

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

 

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

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

Share this post


Link to post
Share on other sites
38 минут назад, sergeymaccar сказал:

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

 

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

 


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

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

 

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

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

Share this post


Link to post
Share on other sites
2 часа назад, SooR сказал:

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

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

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

Share this post


Link to post
Share on other sites
Posted (edited)
15 хвилин назад, Einshtein сказав:

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

 

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

 

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

 

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

 

Edited by sergeymaccar

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
3 часа назад, Einshtein сказал:

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
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/

Share this post


Link to post
Share on other sites
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);

 

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.