jquery carusel

n1k.Sly

Постоялец
Регистрация
7 Сен 2009
Сообщения
97
Реакции
9
Вечер добрый форумчане.

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



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

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

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

П.С. нагуглить что нужно не удалось, только на флэше как мой пример, но флэш не то.
 
Демо: Для просмотра ссылки Войди или Зарегистрируйся
Сайт: Для просмотра ссылки Войди или Зарегистрируйся
А вообще, такую карусель можно и самому накидать. Там кода 2-3кб получается...
Отражение как в вашем примере делается с помощью CSS3. Сама либа написана лет 6 назад, возможно новые jQuery не поддерживает... Наверняка требует подпилки. Если будут проблемы, не расстраивайся, проще скрипта все равно не найдешь :)
 
Может эти подойдут?
Я не знаю что у Вас за идея и для чего Вам именно такой слайдер, но точно могу точно сказать, что то что Вы ищите - это далеко не самый лучший вариант. Он крутится постояно за мышкой, а это раздражает. Если просканировать наиболее популярные ресурсы, различные серьезные сайты, то Вы очень наврятли встретите там такой 3d слайдер.

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

Еще Для просмотра ссылки Войди или Зарегистрируйся есть но он вроде бы платный а нижний скрол можно скорее всего закрыть.
 
Вот, кстати, накидал карусель именно по твоему запросу, которая будет работать с 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= а все остальное расчитается само растянется.

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