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

Question

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

Я работал над 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>

0

javascript html jquery flexslider

Источник

user8040185 02 окт '18 в 06:34

1 ответ

Решение

Другие вопросы по тегам javascript html jquery flexslider

user8620333 02 окт '18 в 12:28 2018-10-02 12:28 · Accepted Answer · 2018-10-02 12:28

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

Для активной ссылки просто добавьте 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>