Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2018, 16:55
Профессор
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 151

заставить слайдер автоматом менять слайды
Добрый день! подскажите что дописать что бы слайдер автоматически менял слайды? Есть код:
$(document).ready(function() {
 var sliders = $(".slider");
 var rightArrow = sliders.children('.right');
 var leftArrow = sliders.children('.left');

  initSliders(sliders)

  var touchstartX = 0;
  var touchstartY = 0;
  var touchendX = 0;
  var touchendY = 0;

  var gestureZone = document.getElementsByClassName('slider');

  for(var i=0;i<gestureZone.length;i++){
    gestureZone[i].addEventListener('touchstart', function(event) {
        touchstartX = event.changedTouches[0].screenX;
        touchstartY = event.changedTouches[0].screenY;
    }, false);

    gestureZone[i].addEventListener('touchend', function(event) {
        touchendX = event.changedTouches[0].screenX;
        touchendY = event.changedTouches[0].screenY;
        handleGesture(this);
    }, false);
  }



  function handleGesture(slideChildren) {
      if (touchendX+45 < touchstartX) {
          moveSlideLeft(slideChildren.getElementsByClassName('right'));
      }

      if (touchendX > touchstartX + 45) {
        moveSlideLeft(slideChildren.getElementsByClassName('left'));
      }

  }






  rightArrow.on('click',function(){
    moveSlideRight(this);
  })

  leftArrow.on('click',function(){
    moveSlideLeft(this);
  })

 function initSliders(sliders){

   sliders.children('.slide').first().addClass('current-slide');
   sliders.children('.slide').hide();

   var slideInfo = {}

   for(var i=0;i<sliders.length;i++){
     var showSlide = $(sliders[i]).children('.slide').first().html();
     $(sliders[i]).append('<div class="showSlides">'+showSlide+'</div>');
   }

 }

 function scrollSlide(slideToShow,currentSlide){

   $(slideToShow).children('.slider-text').stop().animate({opacity:0},450,function(){
     $(slideToShow).children('.slider-text').children('h5').html( $(currentSlide).children('.slider-text').children('h5').html());
     $(slideToShow).children('.slider-text').children('.subheading').html( $(currentSlide).children('.slider-text').children('.subheading').html());
     $(slideToShow).children('.slider-text').children('.description-text').html( $(currentSlide).children('.slider-text').children('.description-text').html());
     $(this).animate({opacity:1},450);
   })

   if( $('.slider').find('.review-soc').length !== 0 ){
   $(slideToShow).find('.review-soc').stop().animate({opacity:0},450,function(){
     $(this).html( $(currentSlide).find('.review-soc').html());
     $(this).animate({opacity:1},450);
   })
 }

   $(slideToShow).children('.slider-image').find('img').stop().animate({  borderSpacing: 90}, {
       step: function(now,fx) {
         $(this).css('-webkit-transform','rotatey('+now+'deg)');
         $(this).css('-moz-transform','rotatey('+now+'deg)');
         $(this).css('transform','rotatey('+now+'deg)');
       },
       duration:'900',
       complete:function(){
         $(this).attr('src', $(currentSlide).children('.slider-image').find('img').attr('src'));
         $(this).attr('alt', $(currentSlide).children('.slider-image').find('img').attr('alt'));
         $(this).animate({  borderSpacing: 0 }, {
           step: function(now,fx) {
             $(this).css('-webkit-transform','rotatey('+now+'deg)');
             $(this).css('-moz-transform','rotatey('+now+'deg)');
             $(this).css('transform','rotatey('+now+'deg)');
           },
           duration:'900'
         })
       }
   });
 }

 function moveSlideRight(arrow){
   var slideToShow = $(arrow).siblings('.showSlides');
   var currentSlide = $(arrow).siblings('.current-slide');
   var nextSlide = $(arrow).siblings('.currentSlide').next();

   if($(currentSlide).next().hasClass('showSlides')){
     $(currentSlide).removeClass('current-slide');
     $(currentSlide).parent('.slider').children('.slide').first().addClass('current-slide');
     currentSlide = $(currentSlide).parent('.slider').children('.slide').first();
     scrollSlide($(slideToShow), $(currentSlide));

   }else{
     $(currentSlide).next().addClass('current-slide');
     $(currentSlide).removeClass('current-slide');
     currentSlide = $(currentSlide).next();
     scrollSlide($(slideToShow), $(currentSlide));

   }
 }
 function moveSlideLeft(arrow){
   var slideToShow = $(arrow).siblings('.showSlides');
   var currentSlide = $(arrow).siblings('.current-slide');
   var nextSlide = $(arrow).siblings('.currentSlide').next();

   if($(currentSlide).prev().hasClass('slider-control')){
     $(currentSlide).removeClass('current-slide');
     $(currentSlide).siblings('.showSlides').prev().addClass('current-slide');
     currentSlide = $(currentSlide).siblings('.showSlides').prev();
     scrollSlide($(slideToShow), $(currentSlide));

   }else{
     $(currentSlide).prev().addClass('current-slide');
     $(currentSlide).removeClass('current-slide');
     currentSlide = $(currentSlide).prev();
     scrollSlide($(slideToShow), $(currentSlide));

   }
 }


});



Меняет по клику на стрелу, пытаюсь заставить вызывать функцию каждые 5 сек, но не хочет работать
window.setInterval(function(){
  moveSlideRight(this);
}, 5000);


Подскажите что нужно ему прописать...
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2018, 17:19
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

Попробуйте это вставить в 145 строку:
(function nextSlide() {
    setTimeout(function() {
        moveSlideRight(rightArrow.get(0));
        nextSlide();
    }, 5000);
})();
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2018, 17:31
Профессор
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 151

Спасибо, Nexus! работает...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Как заставить слайдер останавливаться при наведении мыши? borus Events/DOM/Window 3 31.07.2014 10:55
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34