Помогите со слайдером

Тема в разделе "JavaScript", создана пользователем ВладМ, 20 июл 2018.

Метки:
  1. ВладМ

    ВладМ

    Регистрация:
    20 июл 2018
    Сообщения:
    0
    Симпатии:
    0
    Имеется сайт https://agtplus.ua/en/. Бьюсь над проблемой уже пару дней. Если скроллить сверху вниз второй слайд проскакивает резко. Кто сможет с этим помочь?
    Код:
    use strict";
    
    var scroll_screen = true;//��������� ������ ��������� �� ���� �����
    
    jQuery(function($){
      
       var lang_tag = 'en';
      
       var lang_trig = false;
       $(document).on('click','.en-icon',function(){
           if(!lang_trig){
               $('.ru-icon').css('left','110px');
               $('.ua-icon').css('left','55px');
               lang_trig = true;
           } else {
               $('.ru-icon').css('left','0px');
               $('.ua-icon').css('left','0px');
               lang_trig = false;
           };
              
       });
      
       $("#scrollup").click(function() {
             $("html, body").animate({ scrollTop: 0 }, "slow");
             return false;
           });
      
       $(".lnk").click(function() {
           var target = $(this).attr('href');
             $('html,body').animate({scrollTop: $(target).offset().top  - parseInt($('#menu_slide').height())},
           'slow');
             return false;
           });
          
      
           /* ��������� ������ ����� */
       $(window).scroll(function(){
           if ($(document).scrollTop() > 200) {
               $('#scrollup').animate({bottom: '-1px'},100);
           } else {
               $('#scrollup').animate({bottom: '-38px'},100);
           };
              
           if ($(document).scrollTop() > 0) {
               $('#menu_slide').fadeIn();
           } else {
               $('#menu_slide').fadeOut();
           };
       });
      
      
       /*Load colors*/
       $(document).on('click','.colors_link',function(){
           var catId = $(this).attr('cat_id');
          
           var colorHeder = '';
           switch(catId){
               case '68':
                   colorHeder = '<h2><span class="big_header">SKIN</span> FACADES</h2>';
                   break;
               case '60':
                   colorHeder = '<h2><span class="big_header">ALVIC</span> FACADES</h2>';
                   break;
               case '48':
                   colorHeder = '<h2><span class="big_header">ACRYLIC</span> FACADES</h2>';
                   break;
               case '15':
                   colorHeder = '<h2><span class="big_header">AGT</span> FACADES</h2>';
                   break;
           };
          
           $.post('load-data.php', {
               cat_id: catId
           }, function(data){
               $('#colors-list').addClass('on').fadeIn().find('.wrap').html(colorHeder + data);
               var coordBlock = $('#colors-list').position();
               $("html, body").animate({ scrollTop: coordBlock.top - parseInt($('#menu_slide').height())}, "slow");
               scroll_screen = false;//������ ������� �� ���� �����
              
               //�������� ����
               $(document).on('click','.clr_img',function(){
                   $('#color_preview').find('.modal-title').html($(this).siblings('.clr_name').html());
                   $('#color_preview').find('.modal-body').html('<img src="'+$(this).attr('img_full')+'" />');
                   $('#color_preview').modal('show');
               });
           });
       });
      
       //������� �������
       $(document).on('click','.gallery-icon',function(){
           if($('#gallery-list').is('.on')){
               $('#gallery-list').removeClass('on').fadeOut();
               scroll_screen = true;
           } else {
               $('#gallery-list').addClass('on').fadeIn();
               var coordBlock = $('#gallery-list').position();
               $("html, body").animate({ scrollTop: coordBlock.top - parseInt($('#menu_slide').height())}, "slow");
               scroll_screen = false;//������ ������� �� ���� �����
           };
       });
      
       //������� ������� �������
       $(document).on('click','#close_gallery',function(){
           $('#gallery-list').removeClass('on').fadeOut();
           scroll_screen = true;
       });
      
       //�������� ���� �� �������
       $(document).on('click','.fasad_img',function(){
           $('#color_preview').find('.modal-title').html($(this).siblings('.fasad_name').html());
           $('#color_preview').find('.modal-body').html('<img src="'+$(this).attr('src')+'" />');
           $('#color_preview').modal('show');
       });
      
      
       //������� ������� ������
       $(document).on('click','#close_colors',function(){
           $('#colors-list').removeClass('on').fadeOut();
           var coordBlock = $('#slide-04').position();
           $("html, body").animate({ scrollTop: coordBlock.top - parseInt($('#menu_slide').height())}, "slow");
           scroll_screen = true;
       });
      
       //������� �������� �����
       $(document).on('click','.modal-dialog',function(){
           $('#color_preview').modal('hide');
          
       });
      
       /*scroll a whole page in one mouse wheel*/
       $(document).ready(function () {
           var divs = $(document).find('.slide-block');
          
           var dir = 'up'; // wheel scroll direction
           var div = 0; // current div
           $(document.body).on('DOMMouseScroll mousewheel', function (e) {
              
               if($('#colors-list').is('.on')){
                  
                   var coord_prew = getCoords(document.getElementById($('#colors-list').prev().attr('id')));
                   var coord_next = getCoords(document.getElementById($('#colors-list').next().attr('id')));
                   console.log(coord_prew);
                   if(coord_prew.top > 0) {
                       $('#colors-list').removeClass('on').hide();
                       $("html, body").animate({ scrollTop: $('#colors-list').prev().offset().top - parseInt($('#menu_slide').height())}, "slow");
                       scroll_screen = true;
                       return false;
                   };
                  
                   if(coord_next.top < ($(window).height() / 2)) {
                       $('#colors-list').removeClass('on').hide();
                       $("html, body").animate({ scrollTop: $('#slide-051').offset().top - parseInt($('#menu_slide').height())}, "slow");
                       scroll_screen = true;
                       return false;
                   };
                  
                  
               };
              
               if($('#gallery-list').is('.on')){
                  
                   var coord_next = getCoords(document.getElementById($('#gallery-list').next().attr('id')));
                  
                   if(coord_next.top < parseInt($('#menu_slide').height()) + 150) {
                       $('#gallery-list').removeClass('on').hide();
                       //$("html, body").animate({ scrollTop: coord_next.top - parseInt($('#menu_slide').height())}, "slow");
                       $("html, body").animate({ scrollTop: $('#slide-01').offset().top - parseInt($('#menu_slide').height())}, "slow");
                       scroll_screen = true;
                       return false;
                   };
               };
              
               if(scroll_screen){
                  
                   if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
                       dir = 'down';
                   } else {
                       dir = 'up';
                   }
                  
                   div = -1;
                   divs.each(function(i){
                       if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                           div = i;
                       }
                   });
                   if (dir == 'up' && div > 0) {
                       div--;
                   }
                   if (dir == 'down' && div < (divs.length - 0)).stop() {
                       div++;
                   }
                   $('html,body').stop().animate({
                       scrollTop: divs.eq(div).offset().top - parseInt($('#menu_slide').height())
                   }, 1000);
                   return false;
                  
               };
           });
          
           $(window).resize(function () {
               $('html,body').scrollTop(divs.eq(div).offset().top);
           });`
       });
      
    });
    
    //���������� ��������
    function getCoords(elem){ // ����� IE8-
       if(elem){
           var box = elem.getBoundingClientRect();
           return {
               top: box.top,
               left: box.left,
               width: box.width,
               height: box.height
           };
       };
    };
    
    function getColorFull(id){
       var out;
       $.post('load-data.php', {
               clr_id: parseInt(id)
           }, function(data){
               out = data;
           });
          
       return out;
    };
     
    Lasted edited by : 20 июл 2018
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    1) я слайдера в упор неувидел))
    2) у тебя ошибка в жс
    Код:
    if (dir == 'down' && div < (divs.length - 0)).stop() {
    3) у тебя резкий скрол на всех 3х верхних блоках- просто как якорь))
     
  3. ВладМ

    ВладМ

    Регистрация:
    20 июл 2018
    Сообщения:
    0
    Симпатии:
    0
    А на что можно изменить?:Smile:
     
  4. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    ну ты ж писал код, ты описался/пропустил кусок кода.
    ты же видиш, что ты к условию функцию применяеш?:Negative:
     
  5. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Из-за ошибки, на которую указал spy, скролл вообще через js не обрабатывается, потому всё и проскакивает резко.
     
  6. ВладМ

    ВладМ

    Регистрация:
    20 июл 2018
    Сообщения:
    0
    Симпатии:
    0
    Всем спасибо. Буду шаманить. Но пока без изменений:( В js недавно просто)))