Конфигурация (параметры, опции) плагина caroufredsel

1 Комментарий

1. Реально сделать слайдер в 2 ряда?

   Ответить

   • Да реально , либо с помощью synchronise либо через атрибут http://coolcarousels.frebsite.nl/c/28/
     , надо будет ещё эвенты перевести.

2. Подскажите как отрегулировать скорость смены слайдов?

   Ответить

   • Очевидно Duration) ещё timeoutDuration, delay посмотрите что делают возможно вам они нужны.

   • auto: 3000,

     например, чем меньше значение, тем быстрее

3. Возможно ли сделать так, чтоб картинки на заднем плане были затемнены, а картинка на переднем плане оставалась такой же?

   Ответить

   • через css первому слайду сделать нормальный стиль, а остальные по молчанию затемнить типо так:

     .item{
     /*
     темный стиль
     */
     }

     .item:first-child{
     /*
     светлый стиль для первого слайда
     */
     }

4. Подскажите, как менять Количество видимых элементов в зависимости от размера экрана?

   Ответить

   • items variable как в этом демо например
     http://coolcarousels.frebsite.nl/c/53/

5. Как расположить картинки вот в таком порядке https://hsto.org/files/e36/1cc/012/e361cc0123e9454780b930c43e0a409d.jpg, и если картинок будет 10, чтоб они не вылазили за поля?
   вот я попробовала, при паузе картинки в нормальном положении, но когда начинают двигаться, то последняя сьезжает, можете подсказать??буду очень благодарна!!
   приведу часть кода:

   $(function() {
   	var _center = {
   		width: 364,
   		height: 354,
   		marginLeft: 0,
   		marginTop: 50,
   		marginRight: 0
   	};
   	var _left = {
   		width: 306,
   		height: 289,        
   		marginLeft: 150,
   		marginTop: 75,
   		marginRight: -150
   	};
   	var _right = {
   		width: 306,
   		height: 289,
   		marginLeft: -150,
   		marginTop: 75,
   		marginRight: 150
   	};
   	var _outLeft = {
   		width: 238,
   		height: 224,
   		marginLeft: 0,
   		marginTop: 100,
   		marginRight: -200
   	};
   	var _outRight = {
   		width: 238,
   		height: 224,
   		marginLeft: -200,
   		marginTop: 100,
   		marginRight: 0
   	};
   	$('#carousel').carouFredSel({
   		width: 900,
   		height: 600,
   		align: false,
   		items: {
   			visible: 3,
   			width: 50
   		},
   		scroll: {
   			items: 1,
   			duration: 400,
   			onBefore: function( data ) {
   				data.items.visible.eq( 0 ).animate(_outLeft);
   				data.items.visible.eq( 1 ).animate(_left);
   				data.items.visible.eq( 2 ).animate(_center);
   				data.items.visible.eq( 3 ).animate(_right).css({ zIndex: 1 });
   				data.items.visible.eq( 4 ).next().css(_outRight).css({ zIndex: 0 });
    
   				setTimeout(function() {
   					data.items.visible.eq( 0 ).css({ zIndex: 1 });
   					data.items.visible.eq( 1 ).css({ zIndex: 2 });
   					data.items.visible.eq( 2 ).css({ zIndex: 3 });
   					data.items.visible.eq( 3 ).css({ zIndex: 2 });
                       data.items.visible.eq( 4 ).css({ zIndex: 1 });
   				}, 400);
   			}
   		}
   	});
   $('#carousel').children().eq( 0 ).css(_outLeft).css({ zIndex: 1 });
   	$('#carousel').children().eq( 1 ).css(_left).css({ zIndex: 2 });
   	$('#carousel').children().eq( 2 ).css(_center).css({ zIndex: 3 });
   	$('#carousel').children().eq( 3 ).css(_right).css({ zIndex: 2 });
   	$('#carousel').children().eq( 4 ).css(_outRight).css({ zIndex: 1 });
   });
   

   Ответить

   • могу предположить что вот так http://coolcarousels.frebsite.nl/c/59/ можно сделать

6. Владимир,подскажите, пожалуйста как сделать. Нужно чтобы прокрутка включалась только если не все элементы вошли в строку.
   Ниже приведен пример кода.
   Например,сейчас, если элемента всего 2 и места в строке еще полно, один элемент скрывается.
   Хотелось бы чтобы все элементы выводились в строку. А если все элементы не помещаются, только тогда подключалась прокрутка.

   $(ul).carouFredSel({
   width: «100%»,
   height: 100,
   circular: false,
   //infinite: false,
   responsive: true,
   auto : false,
   prev:’#cwprev’+ elems[i].id,
   next:’#cwnext’+ elems[i].id,
   align:»center»,
   scroll:{
   items:1,
   duration:1000
   },

   });

   Ответить

   • ваша проблема в том что у вас items равно 1 если укажите visible, или variable то думаю добьетесь желаемого

7. Привет, подскажите что не так не могу понять, стрелка превью слайдит по 2 слайда, некст по 1 (мне нужно что виден бы 1слайд и слайдил по 1), причем слайдит рандомно, если идут итемы 1,2,3, я жму некст 1 уходит, и если нажму прев то не 1 слайд возвращается а 2 или 3 (чаще 2), уже перепробовал кучу комбинаций не помогают, ниже код

   width: ‘auto’,
   height: ‘auto’,
   responsive: true,
   pagination: false,
   align: ‘left’,
   circular: false,
   infinite: false,
   auto: false,
   scroll:{
   items:1,
   },
   prev : {
   button : function() {
   return tab.find(‘.cfs-nav-left’);
   },
   key : «left»,
   items:1
   },
   next : {
   button : function() {
   return tab.find(‘.cfs-nav-right’);
   },
   key : «right»,
   items:1
   },

   Ответить

8. еще заметил, что когда жму назад, клонируется слайд который я перематываю и из-за этого как бы перематывает 2 слайда, тот который перематывается и его клон. Почему так не понятно

   Ответить

   • очень странно , попробуйте в отдельном файле создать слайдер, возможно , конфликт каких либо скриптов , у меня этот https://gist.github.com/petrozavodsky/fa5235d5eb94d9363cd5 код работает именно так как у вас описано ( ну то есть листает по одному слайду как это и ожидается )

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

   Ответить

10. Скажите пожалуйста, как сделать два таких слайдера на одной странице???

    Ответить

    • Например так

11. Здравствуйте, при выравнивании по центру, ( align: ‘center’) в центр помещается первое изображение — остальные вправа и за рамки, т.е. левая область просто пустая.
    есть способ это исправить?

    Ответить

    • трудно сказать точно но возможно вот так :

             $('.block').carouFredSel({
                  scroll: {
                      items: 3,
                  },
      
              });
      

12. Владимир, помогите разобраться с настройкой высоты и ширины картинок в caroufredsel. Я пытаюсь объединить параллакс эффект с caroufredsel в фоне. Но никак не могу добиться корректного отображения размеров картинокю Вот ссылка на fiddle: https://jsfiddle.net/user/pupsik111/fiddles/ Буду благодарен за любую помощь

    Ответить

    • я бы с радостью помог, но в том примере что по ссылке непонятно где сам caroufredsel, точнее даже там нет caroufredsel поэтому неясно какие с ним проблемы

13. Владимир, а как правильно узнать индекс или id слайда, который показывается в данный момент, чтобы использовать этот индекс в функции onAfter или onBefore? Например, чтобы текстовую информацию про этот слайд показать.

    Ответить

    • Вот так:

        $('.slider').caroufredsel({
          scroll: {
              onBefore: function () {
                  var current_slide =  $('.h_slider-full-text').triggerHandler('currentVisible');
                  var text =  current_slide.find('.text-block').text();
                  alert(text );
              }
          }
      });
      

14. подскажите, как можно по клику вернуться к первому слайду. и закрыть слайдер после последнего слайда?

    Ответить

    • 1. Для перехода к слайду есть триггер

      // .selector - это селектор на котором висит слайдер например  $('.selector').carouFredSel( ...
      //3 - index (номер слайда начиная с 0 ) слайда к которому нужно промотать.
      $('.button').on('click', function(){
           $('.selector').trigger('slideTo', 3);
      });
      

      2. Закрыть понятие растяжимое, можно сделать $(‘.selector’).trigger(«destroy»); и отключить carouFredSel потом опять инициализировать если понадобится, можно просто сделать $(‘.selector’).hide() и скрыть через css или вообще $(‘.selector’).remove(), зависит от того зачем требуется.

15. По триггеру slideTo не выходит сделать, т..к. после прокрутки слайда, они меняют нумерацию.
    Пример. Есть слайды 1(0), 2(1), 3(2). Когда третий дошел до конца, то он становиться 0 по номеру при клике на кнопку.
    пытаюсь реализовать такой код

    $(document).ready(function() {
    
    $('#slider').addClass('item-carousel');
    
    var $highlight = function() {  
        $( "#sliders" ).hide()
     }
     
    $( ".play" ).click(function() { 
    
       $('.item-carousel').trigger("destroy"); 
      
      $( "#sliders" ).show()
        
      $('.item-carousel').carouFredSel({
            auto: {						
    		progress: "#bar",
                    onEnd: 	$highlight	 
    		},
            
            items               : {						
    		visible             : 1,
    		start: 0
    						},		
            direction           : "left",
    	circular            : false,
    	infinite            : false,
            scroll : {
                items           : 1,           
                duration        : 500,
                pauseOnHover    : false,
    	    fx : "crossfade",
    	    easing          : "swing",
    	    queue           : false,
                event           : "click",            		
            },
    	swipe : { onTouch : false, onMouse : false },
    	transition: true,
    		
        });
    	
       $('.item-carousel').trigger('slideTo', 0); 
    
      });
    
    });
    

    смысл кода — жму по кнопке Пуск и запускается слайдер. После последнего слайда слайдер закрывается. Заново жму кнопку Пуск — опять слайдер с первого слайдера запускается. никак не могу добиться нужного эффекта, чтобы во второй раз слайдер открывался с первого слайда, а не с последнего. И чтобы закрывался после последнего (сейчас при использовании onEnd закрывается перед последним).

    Ответить

    • все не так $(‘.item-carousel’).trigger(‘slideTo’, 0); пролистает на первый слайд , не зависимо от его текущей позиции индекс берется на момент старта слайдера , то есть он константа можно сказать? если этого недостаточно то могу сказать что текущую позицию активного слайда можно так узнать — $(‘.item-carousel’).triggerHandler(‘currentPosition’);

16. что-то я запутался :) у меня вот идет второй слайд, я жму на кнопку где прописан $(‘.item-carousel’).trigger(‘slideTo’, 0); и у меня начинает проигрываться тот же слайд. Если ставлю к примеру $(‘.item-carousel’).trigger(‘slideTo’, 2); — то у меня отпрыгивает на 3 слайда назад. А константой служит не первый слайд инициализированный, а тот слайд, что сейчас идет 0. нельзя сделать не по нумерации слайда к примеру, а по id слайда как нибудь?

    Ответить

17. Здравствуйте! Вот у меня такой вопрос, можно ли заменить нумерацию чем-нибудь другим? Блоками например.Чтобы выводились не цифры!

    Ответить

    • Ну а что стоить эти цифры скрыть через css font-size:0; display: block и будут блоки без нумерации

18. Здравствуйте Владимир! На сайте установлена карусель. Мне необходимо было сделать, чтобы карусель была адаптивная, и количество видимых элементов в ней изменялось в зависимости от ширины экрана. Я добился этого. Но появилась проблема: при любом изменении ширины экрана кнопки навигации принимают класс «hidden» и скрываются. Уже несколько дней не могу понять, почему так происходит. Решил спросить у Вас. Пожалуйста, посоветуйте, как я должен сделать, чтобы кнопки оставались всегда видимыми?

    Благодарю. Дмитрий.

    Ответить

    • возможно проблема в том что количество отображаемых элементов галереи вашей реализации недостаточное для прокрутки , есть много вариантов того что может пойти не так, неплохо было бы посмотреть гист с кодом, но вобще адаптивные галери на caroufredsel делать не всегда легко, много неочевидных моментов, даже мне трудно бывает что то реализовать через него поэтому если это не что-то очень особенное возможно стоит использовать http://owlgraphic.com/owlcarousel/ из минусов этого скриптика то что он не умеет делать зацикленные крутилки, зато использует css для адаптивности, и более плавно работает, caroufredsel все таки достаточно старый и уже появились альтернативы

19. Здравствуйте Владимир еще раз!
    Извините, я не понял, что такое гист. Но код карусели вот такой:

    $(window).load(function() {
        $.fn.startCarousel = function() {
            $.each($('.slider-block .items'), function(i, val) {
                var max = 0;
    
                $.each($(val).find('img'), function() {
                    var h = $(this).height();
                    if (h > max) max = h;
                    $(this).parent().parent().parent().find('.book').css('height', h);
                });
    
                $(val).find('.noim .book').css('height', 270);
                $(val).find('.cell').css('height', max);
                $(val).find('.item').css('height', max+170);
    
                if( ($(window).width() > 1170)&&($(document).width() > 1170) ) {
                    var itemnumb = 5;
                } else if ( ($(window).width() > 920)&&($(document).width() > 920) ) {
                    var itemnumb = 4;
                } else if ( ($(window).width() > 700)&&($(document).width() > 700) ) {
                    var itemnumb = 3;
                } else if ( ($(window).width() > 470)&&($(document).width() > 470) ) {
                    var itemnumb = 2;
                } else if ( ($(window).width() > 0)&&($(document).width() > 0) ) {
                    var itemnumb = 1;
                }
    
                $(val).carouFredSel({
                    infinite:true,
                    items: {visible:itemnumb,minimum:1,maximum:15},
                    auto: false,
                    pagination: false,
                    mousewheel: false,
                    scroll : {
                        fx : 'scroll',
                items : 'variable',
                duration : 700
            },
                prev : $(val).parent().find('.prev'),
                next : $(val).parent().find('.next'),
                swipe: {
                    onTouch: true
                }
            });
            });
        };
    
        $(this).startCarousel();
    
        $(window).resize(function() {
            $(this).startCarousel();
        });
    });
    

    Ответить

    •        $(window).load(function () {
                  $.fn.startCarousel = function () {
                      $.each($('.slider-block .items'), function (i, val) {
                          var max = 0;
      
                          $.each($(val).find('img'), function () {
                              var h = $(this).height();
                              if (h > max) max = h;
                              $(this).parent().parent().parent().find('.book').css('height', h);
                          });
      
                          $(val).find('.noim .book').css('height', 270);
                          $(val).find('.cell').css('height', max);
                          $(val).find('.item').css('height', max + 170);
      
                          if (($(window).width() > 1170) && ($(document).width() > 1170)) {
                              var itemnumb = 5;
                          } else if (($(window).width() > 920) && ($(document).width() > 920)) {
                              var itemnumb = 4;
                          } else if (($(window).width() > 700) && ($(document).width() > 700)) {
                              var itemnumb = 3;
                          } else if (($(window).width() > 470) && ($(document).width() > 470)) {
                              var itemnumb = 2;
                          } else if (($(window).width() > 0) && ($(document).width() > 0)) {
                              var itemnumb = 1;
                          }
                          var args = {
                              infinite: true,
                              items: {
                                  visible: itemnumb,
                                  minimum: 1,
                                  maximum: 15
                              },
                              auto: false,
                              pagination: false,
                              mousewheel: false,
                              scroll: {
                                  fx: 'scroll',
                                  items: 'variable',
                                  duration: 700
                              },
                              prev: $(val).closest('.slider-block').find('.prev'),
                              next: $(val).closest('.slider-block').find('.next'),
                              swipe: {
                                  onTouch: true
                              }
                          };
                          console.log(args);
                          $(val).carouFredSel(args);
                      });
                  };
      
                  $(this).startCarousel();
      
                  $(window).resize(function () {
                      $(this).startCarousel();
                  });
              });
      

      <div class="slider-block">
          <div class="items">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
              <div class="item">...</div>
          </div>
      
          <div class="prev"> < </div>
          <div class="next"> > </div>
      </div>
      </div>
      

      вот так примерно нужно сделать

20. Спасибо Владимир! Я разобрался сам. Решение — костыль, ну а куда деваться…

    Благодарю за внимание!

    Ответить

21. О! Не увидел Вашего сообщения. Спасибо!

    Ответить

    • да не за что

22. Ваше решение работает! Благодарю еще раз!

    Ответить

23. Здравствуйте, Владимир.
    Столкнулся с такой проблемой: есть страница со скриптом http://steshka.ru/trolli.html, НО при просмотре на мобильном, картинки в карусели не сжимаются(адаптивно) как на всем сайте, перекопал весь код сайта, рыл 2 дня, дело уже было ради принципа. В итоге, обнаружил, что в исходнике http://coolcarousels.frebsite.nl/c/32/ отсутствует meta name=»viewport», а у меня на сайте он есть (сайт адаптивный), если убрать viewport, то карусель становится адаптивной, но сайт искажается. Подскажите пожалуйста, какой параметр или класс настроить, чтобы карусель заработала в адаптивном режиме. owlcarousel уже опробовал, но нужен именно этот слайдер, заранее спасибо.

    Ответить

24. Добрый день, Владимир. Подскажите, пожалуйста, а можно ли подключить на галерею к которой уже подключен этот скрипт, еще и второй скрипт, который будет отвечать за увеличение картинки по клику. У меня почему-то, то один скрипт не работает, то второй.

    Ответить

25. добрый день, как параллельно подключить скрипт увеличивающий картинку по клику?

    Ответить

    • Смотря что за скрипт , но так точно можно сделать ничего не мешает

26. Добрый день. А как сделать чтоб слайдер моментально останавливался при наведении мыши ?
    для плавного движения поставил так пока блоки не выравняются не останавливается
    duration :6000,
    timeoutDuration:1,
    delay:500,

    Ответить

    • да и забыл
      pauseOnHover : true,

27. Добрый день, Владимир!
    Подскажите, как организовать callback на событие перед и после загрузки всей галереи, а то много элементов и пока не применится скрипт визуальное восприятие галереи страдает(все элементы списком вниз).
    Заранее благодарен за помощь.

    Ответить

    • если я не ошибаюсь то

      onBefore: : function() {}, onAfter: onBefore: : function() {} 

      попробуйте

28. пробовал, не работает(

    Ответить

    • Значит советую примеры полистать начиная с этого — http://coolcarousels.frebsite.nl/c/14/ может OnCreate сгодится

29. Здравствуйте, подскажите пожалуйста, мне нужно чтобы при resize окна выводилось столько слайдов сколько помещается по ширине окна. Если перезагрузить выводится нужное количество, но нужно именно при resize

    Ответить

    • К счастью пример примерно того что вы хотите видеть есть тут http://coolcarousels.frebsite.nl/c/54/

30. Здравствуйте!
    Подскажите, пожалуйста (очень надо), можно ли сделать сделать так, чтобы скролл работал не на заданное кол-во слайдов, а пока тянешь мышкой?
    Например, как вот здесь http://www.masterslider.com/features/templates/staff-carousel-version-1/

    Ответить

    • Именно для того как это работает в вашей демке caroufredsel не подходит, она ограничено умеет работать со свайпами, советую https://github.com/kenwheeler/slick/ попробовать

    • К сожалению, Slick тоже не совсем подходит. При длительном перетаскивании (кликнуть мышкой, тащить и не отпускать) слайды подгружаются не сразу. А так же при свайпе слева направо иногда (когда самый левый слайд является первым) перетаскивание не работает корректно.
      Может есть еще варианты? Сразу скажу, что OwlCarousel тоже не подходит.
      Спасибо.

    • Может https://github.com/ganlanyuan/tiny-slider больше подойдет

    • Большое спасибо!