Sync flex Sliders - flex-direction-nav (стрелки) - PullRequest
Новая
       10

Sync flex Sliders - flex-direction-nav (стрелки)

0 голосов
/ 02 октября 2018

Я работал над Slider, используя flex-slider.У меня появилась идея синхронизировать два flexsliders в один, как мы делаем с Owl-каруселью.Поскольку анимированная подпись к изображению анимируется вместе с изображением, мне нужно использовать два флайслайдера, потому что я хочу, чтобы анимация подписи гибких дисков отличалась от анимации изображения.Я синхронизировал их с помощью этого Ответа Но теперь я застрял в двух моментах:

1) Я хочу, чтобы стрелки тоже синхронизировались.Как вы можете видеть в моем коде, я сгруппировал flex-direction-navs.Теперь я хочу изменить оба слайда по нажатию кнопки, но это не работает, так как имеет наслоение на него.

2) Я хочу, чтобы кнопка пользовательского таргетинга была активной в зависимости от активного слайда.например, я на третьем слайде и хочу, чтобы третий тег привязки был активным, как изменение цвета и т. д.

Надеюсь, я четко объяснил свою проблему.Если вам нужна дополнительная информация, пожалуйста, прокомментируйте ниже.

Вот ссылка Codepen .Далее следует код. 

jQuery(document).ready(function($) {

  $('#main-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
      $('a.slide_thumb').click(function() {
        $('.flexslider').show();
        var slideTo = $(this).attr("rel") //Grab rel value from link;
        var slideToInt = parseInt(slideTo) //Make sure that this value is an integer;
        if (slider.currentSlide != slideToInt) {
          slider.flexAnimate(slideToInt) //move the slider to the correct slide (Unless the slider is also already showing the slide we want);
        }
      });
    }

  });

  $('#secondary-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
      $('a.slide_thumb').click(function() {
        $('.flexslider').show();
        var slideTo = $(this).attr("rel") //Grab rel value from link;
        var slideToInt = parseInt(slideTo) //Make sure that this value is an integer;
        if (slider.currentSlide != slideToInt) {
          slider.flexAnimate(slideToInt) //move the slider to the correct slide (Unless the slider is also already showing the slide we want);
        }
      });
    }

  });

});
.slider-wrap {
  position: relative;
  width: 700px;
  margin: 0 auto
}

#secondary-slider {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

.flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-next,
.flex-direction-nav .flex-next {
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover,
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}

#main-slider .flex-direction-nav .flex-prev,
#secondary-slider .flex-direction-nav .flex-prev {
  position: absolute;
  top: 20px !important;
  right: 0 !important;
  opacity: 1;
}

#main-slider .flex-direction-nav .flex-next,
#secondary-slider .flex-direction-nav .flex-next {
  position: absolute;
  top: 120px !important;
  right: 0;
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.css" rel="stylesheet" />
<div class="slider-wrap">
  <div id="main-slider" class="flexslider">
    <ul class="slides">
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
    </ul>
  </div>

  <div id="secondary-slider" class="flexslider">
    <ul class="slides">
      <li>
        <p>Text 1</p>
      </li>
      <li>
        <p>Text 2</p>
      </li>
      <li>
        <p>Text 3</p>
      </li>
      <li>
        <p>Text 4</p>
      </li>
    </ul>
  </div>
  <a rel="0" class="slide_thumb" href="#">slide link 1</a>
  <a rel="1" class="slide_thumb" href="#">slide link 2</a>
  <a rel="2" class="slide_thumb" href="#">slide link 3</a>
  <a rel="3" class="slide_thumb" href="#">slide link 3</a>

1 Ответ

0 голосов
/ 02 октября 2018

Вы можете применить ту же логику, что и для ссылок, создав собственные стрелки.Вы удаляете один по умолчанию, а затем добавляете свой собственный слушатель для перемещения ползунка.

Для активной ссылки просто добавьте больше JS для переключения класса.

Вот пример, в котором вы можете легко использоватьCSS, чтобы настроить положение, как вы хотите: 

jQuery(document).ready(function($) {

  $('#main-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
      $('a.slide_thumb').click(function() {
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('.flexslider').show();
        var slideTo = $(this).attr("rel") //Grab rel value from link;
        var slideToInt = parseInt(slideTo) //Make sure that this value is an integer;
        if (slider.currentSlide != slideToInt) {
          slider.flexAnimate(slideToInt) //move the slider to the correct slide (Unless the slider is also already showing the slide we want);
        }
      });
      $('.flex-prev').click(function(e) {
        e.preventDefault();
        $('.active').removeClass('active');
        $('.flexslider').show();
        var c = slider.currentSlide;
        if(c!=0) {
          c--;
          slider.flexAnimate(c);
          $('.slide_thumb[rel='+c+']').addClass('active');
        } else {
          slider.flexAnimate(3);
          $('.slide_thumb[rel=3]').addClass('active');
        }
      })
       $('.flex-next').click(function(e) {
       e.preventDefault();
        $('.active').removeClass('active');
       $('.flexslider').show();
        var c = slider.currentSlide;
        if(c!=3) {
          c++;
          slider.flexAnimate(c);
          $('.slide_thumb[rel='+c+']').addClass('active');
        } else {
          slider.flexAnimate(0);
          $('.slide_thumb[rel=0]').addClass('active');
        }
      })
    }

  });

  $('#secondary-slider').flexslider({
    animation: "slide",
    slideToStart: 0,
    start: function(slider) {
      $('a.slide_thumb').click(function() {
      $('.active').removeClass('active');
        $(this).addClass('active');
        $('.flexslider').show();
        var slideTo = $(this).attr("rel") //Grab rel value from link;
        var slideToInt = parseInt(slideTo) //Make sure that this value is an integer;
        if (slider.currentSlide != slideToInt) {
          slider.flexAnimate(slideToInt) //move the slider to the correct slide (Unless the slider is also already showing the slide we want);
        }
      });
      $('.flex-prev').click(function(e) {
      e.preventDefault();
        $('.active').removeClass('active');
      $('.flexslider').show();
        var c = slider.currentSlide;
        if(c!=0) {
          c--;
          slider.flexAnimate(c);
          $('.slide_thumb[rel='+c+']').addClass('active');
        } else {
          slider.flexAnimate(3);
          $('.slide_thumb[rel=3]').addClass('active');
        }
      })
       $('.flex-next').click(function(e) {
       e.preventDefault();
        $('.active').removeClass('active');
       $('.flexslider').show();
        var c = slider.currentSlide;
        if(c!=3) {
          c++;
          slider.flexAnimate(c);
          $('.slide_thumb[rel='+c+']').addClass('active');
        } else {
          slider.flexAnimate(0);
          $('.slide_thumb[rel=0]').addClass('active');
        }
      })
    }

  });

});
.slider-wrap {
  position: relative;
  width: 700px;
  margin: 0 auto
}

#secondary-slider {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}
.flexslider .flex-direction-nav {
 display:none;
}

.active {
  color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.css" rel="stylesheet" />
<div class="slider-wrap">
  <div id="main-slider" class="flexslider">
    <ul class="slides">
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
      <li>
        <img src="https://via.placeholder.com/350x150" />
      </li>
    </ul>
  </div>

  <div id="secondary-slider" class="flexslider">
    <ul class="slides">
      <li>
        <p>Text 1</p>
      </li>
      <li>
        <p>Text 2</p>
      </li>
      <li>
        <p>Text 3</p>
      </li>
      <li>
        <p>Text 4</p>
      </li>
    </ul>
  </div>
  <ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul>
  <a rel="0" class="slide_thumb" href="#">slide link 1</a>
  <a rel="1" class="slide_thumb" href="#">slide link 2</a>
  <a rel="2" class="slide_thumb" href="#">slide link 3</a>
  <a rel="3" class="slide_thumb" href="#">slide link 3</a>
...