jquery carusel

Тема в разделе "JavaScript", создана пользователем n1k.Sly, 6 ноя 2012.

Модераторы: ZiX
  1. n1k.Sly

    n1k.Sly Постоялец

    Регистр.:
    7 сен 2009
    Сообщения:
    81
    Симпатии:
    7
    Вечер добрый форумчане.

    У меня достаточно тут все банально, ищу карусель
    такую вот:

    Перейти по ссылке

    или максимально приближенную к ней, основное требование так это чтоб вращалась карусель без ползунков а по положению курсора. Ну и конечно чтоб отредактировать ее было без всяких там замороченных выдумок разрабов :)

    Сам что-то найти не смог, встречались похожие от CodeCanyon, но в нем было что-то не то :)

    буду благодарен за помощь господа :)

    П.С. нагуглить что нужно не удалось, только на флэше как мой пример, но флэш не то.
     
  2. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    Демо: Перейти по ссылке
    Сайт: Перейти по ссылке
    А вообще, такую карусель можно и самому накидать. Там кода 2-3кб получается...
    Отражение как в вашем примере делается с помощью CSS3. Сама либа написана лет 6 назад, возможно новые jQuery не поддерживает... Наверняка требует подпилки. Если будут проблемы, не расстраивайся, проще скрипта все равно не найдешь :)
     
  3. СтарыйМудрец

    СтарыйМудрец Создатель

    Регистр.:
    23 окт 2012
    Сообщения:
    36
    Симпатии:
    5
    Может эти подойдут?
    Я не знаю что у Вас за идея и для чего Вам именно такой слайдер, но точно могу точно сказать, что то что Вы ищите - это далеко не самый лучший вариант. Он крутится постояно за мышкой, а это раздражает. Если просканировать наиболее популярные ресурсы, различные серьезные сайты, то Вы очень наврятли встретите там такой 3d слайдер.

    Но хозяин - барин, так, что есть похожие варианты, но без движения мышкой, а самое главное бесплатный.
    Качать Перейти по ссылке
    Смотреть демо Перейти по ссылке

    Еще Перейти по ссылке есть но он вроде бы платный а нижний скрол можно скорее всего закрыть.
     
  4. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    Вот, кстати, накидал карусель именно по твоему запросу, которая будет работать с jQuery 1.7.2 и 1.8.2
    Код:
        // Карусель
        $.fn.carousel3d = function(items, iw, ih){
          var enabled = true,
            pos = active + Math.floor(items.length / 2),
            speed = 0
          var me = $(this)
            .mouseenter(function(){ enabled = true })
            .mouseleave(function(){ enabled = false })
            .mousemove(function(e){ speed = (e.pageX - win.width() / 2) / win.width() })
          $.each(items, function(i, v){
            var ii = i
            $('<img/>')
              .width(iw)
              .height(ih)
              .attr('src', pixelUri)
              .css('background', 'url(' + (v) + ') center center no-repeat')
              .css('background-size', v.logo ? 'contain' : 'cover')
              .appendTo(me)
              .wrap('<div/>')
              .mouseenter(function(){
                enabled = false
                var parent = $(this).parent()
                this.lastZIndex = parent.css('z-index')
                this.lastOpacity = parent.css('opacity')
                parent
                  .css('z-index', 1000)
                  .css('opacity', 1)
              })
              .mouseleave(function(){
                $(this).parent()
                  .css('z-index', this.lastZIndex)
                  .css('opacity', this.lastOpacity)
                enabled = true
              })
              .click(function(){
                alert(ii);
              })
          })
     
          var rx = me.width() / 2 - iw
          var ry = me.height() / 2 - ih
          var ox = me.offset().left
          var oy = me.offset().top
          var px = win.width() / 2
          var py = oy + ry + ih
     
          function step(dispos) {
            var ns;
            if(typeof dispos == 'undefined'){
              dispos = 0
              ns = parseInt(1200 - Math.abs(speed * 260))
            } else {
              ns = 800
            }
            if(!enabled && dispos == 0) {
              setTimeout(function(){step()}, ns)
              return
            }
            pos += dispos == 0 ? (speed >= 0 ? 1 : -1) : dispos
            if(pos < 0) pos += items.length
            else if(pos >= items.length) pos -= items.length
            me.children().each(function(k, v){
              var a = (pos + k) / items.length * 2 * Math.PI
              var i = $(v)
              var op = (1 + Math.sin(a)) / 2
              i
                .stop()
                .css('z-index', 10 + parseInt((1 + Math.sin(a)) * items.length * 2))
              if(typeof $.browser.msi != 'undefined')
                i
                  .animate({
                    left: parseInt(px + rx*Math.cos(a) - i.width() / 2),
                    top: parseInt(py + ry*Math.sin(a) - i.height() / 2),
                    opacity: op > .3 ? op : 0
                  }, ns, 'linear')
              else if(typeof $.browser.opera == 'undefined')
                i
                  .transition({
                    left: parseInt(px + rx*Math.cos(a) - i.width() / 2),
                    top: parseInt(py + ry*Math.sin(a) - i.height() / 2),
                    opacity: op > .3 ? op : 0
                  }, ns, 'linear', function(){
      //              i.css('visibility', op > .3 ? 'visible' : 'hidden')
                  })
              else
                i
                  .transition({
                    left: parseInt(px + rx*Math.cos(a) - i.width() / 2),
                    top: parseInt(py + ry*Math.sin(a) - i.height() / 2)
                  }, ns, 'linear', function(){
      //              i.css('visibility', op > .3 ? 'visible' : 'hidden')
                  })
            })
            setTimeout(function(){step()}, ns)
          }
          next = step
          step()
        }
    
    Требуется заранее подключить библиотеку для плавных переходов
    Код:
    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
    Правда в IE10 идеально работает с .animate() нежеле через .transition(). Но я предусмотрел отдельно анимацию для IE, Оперы и всего останого...

    Параметры:
    items - массив, содержащий url-ы картинок
    iw - ширина картинки
    ih - высота картинки

    Запускать так:
    Код:
    $('#my-div').carousel3d(['/img1.png', '/img2.png'], 140, 100)
    Сам DIV c id "my-div" должен быть создан заранее до выполнения строчки выше. Размеры "my-div" должны быть заданы заранее в CSS или style= а все остальное расчитается само растянется.

    Фууух... Больше часа писал сообщение... Если что-то будет не получаться - пиши в ЛС!