Форум 1С-Битрикс

Задавайте свои вопросы и отвечайте на вопросы других участников форума

Страницы: 1
Ответить
Смена картинки при движении курсора
 
Подскажите плагин на js, при помощи которого можно сделать карусель смены изображения при движения мышки по картинке
 
Есть отличный плагин на jQuery называется Brazzers-Carousel
Скачать дистрибутив можно здесь https://github.com/agragregra/Brazzers-Carousel-Repo/archive/master.zip

1) Подключаем стили: <link rel="stylesheet" href="css/jQuery.Brazzers-Carousel.min.css">

2) Подключаем jQuery : <script href="js/jQuery.js"></script>

3) Подключаем скрипты: <script href="js/jQuery.Brazzers-Carousel.min.js"></script>

4) Необходимо добавить html код
Цитата
<span class="thumb-item">
<img src="img/image-1.jpg" alt="Alt">
<img src="img/image-2.jpg" alt="Alt">
<img src="img/image-3.jpg" alt="Alt">
</span>
5) Стартуем плагин
Цитата
$(".thumb-item").brazzersCarousel();

Подробнее посмотреть демо и как подключается можно здесь http://agragregra.github.io/Brazzers-Carousel/
Плагин совершенно бесплатный
 
Карусель плохо работает в браузере на мобильных устройствах
Дописал скрипт в файле jQuery.Brazzers-Carousel.js и теперь работает прекрасно
Код
(function($) {
   $.fn.brazzersCarousel = function() {
      return this.addClass("brazzers-daddy").append("<div class='tmb-wrap'><div class='tmb-wrap-table'>").append("<div class='image-wrap'>").each(function() {
         var this_wrapper = $(this);
            
            this_wrapper.removeClass("thumb-item");
            this_wrapper.find("img").appendTo(this_wrapper.find(".image-wrap")).each(function() {
               this_wrapper.find(".tmb-wrap-table").append("<div>");
            });
         
      }).find(".tmb-wrap-table").bind('touchstart', function(event) {
         var xClick = event.originalEvent.touches[0].pageX;
         
         $(this).one("touchmove", function (event) {
            
               var xMove = event.originalEvent.touches[0].pageX;
            
            if (Math.floor(xClick - xMove) > 5) {
               var this_img = $(this).closest(".brazzers-daddy").find("img");
               var all_thmbs = $(this).find("div");
               var index_div = $(this).find("div.active").index();
               all_thmbs.removeClass("active");
               next = index_div+1;
               if(!this_img.eq(next).length){
                  next = 0;
               }
               this_img.hide().eq(next).css("display", "block");
               all_thmbs.eq(next).addClass("active");
                           
            }
            else if (Math.floor(xClick - xMove) < -5) {
               
               var this_img = $(this).closest(".brazzers-daddy").find("img");
               var all_thmbs = $(this).find("div");
               var index_div = $(this).find("div.active").index();
               all_thmbs.removeClass("active");
               next = index_div-1;
               if(!this_img.eq(next).length){
                  next = this_img.length;
               }
               this_img.hide().eq(next).css("display", "block");
               all_thmbs.eq(next).addClass("active");
            }
            
         });
         $(".carousel").on("touchend", function () {
            $(this).off("touchmove");
         });
         
      }).find("div").hover(function() {
         var this_img = $(this).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img");
         var all_thmbs = $(this).parent(".tmb-wrap-table").find("div");
         this_img.hide().eq($(this).index()).css("display", "block");
         all_thmbs.removeClass("active");
         $(this).addClass("active");
      }).parent().find(":first").addClass("active");
      
      
   };
})(jQuery);
Страницы: 1
Ответить
Читают тему (гостей: 1)
Форма ответов
Текст сообщения*
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Отправить Отменить