Flex Slider - 두 슬라이더에 대해 동일한 컨트롤을 추가하는 방법

Flex Slider - 두 슬라이더에 대해 동일한 컨트롤을 추가하는 방법

프로젝트 하나에 플렉스 슬라이더를 사용하고 있습니다.같은 컨트롤로 한 페이지에 두 개의 슬라이더를 컨트롤해야 합니다.

한 부분은 영상을 보여주는 주 슬라이더이고, 두 번째 부분은 텍스트입니다(이 경우 WP의 "the_excect"에서 가져온 것입니다).

기본적으로, 이것은 제가 한 페이지에 두 개의 슬라이드를 부를 때 사용하는 코드입니다.

  $(window).load(function() {
    $('#main-slider').flexslider({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });

    $('#secondary-slider').flexslider();
  });

이제 두 컨트롤을 모두 동일한 컨트롤에 "연결"해야 하므로 화살표를 클릭하면 두 컨트롤이 모두 슬라이딩/페이드됩니다.

컨트롤컨테이너 설정을 삭제하고 두 슬라이더에 연결하는 탐색을 직접 만들어 수행하려는 작업을 수행할 수 있습니다.다음은 (테스트되지 않은 내용임에 유의하십시오)

마크업은 이렇게 보일 겁니다.링크에 rel 속성을 기록해 두십시오. 아래에서 이 속성을 사용합니다.또한 값은 0부터 시작합니다. 슬라이드의 값과 일치합니다(예: 첫 번째 슬라이드는 0, 두 번째 슬라이드는 1 등).

<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>

<div id="main-slider" class="flexslider">
<ul class="slides">
    <li>
        <img src="image1.jpg" />
    </li>
    <li>
        <img src="image2.jpg" />
    </li>
    <li>
        <img src="image3.jpg" />
    </li>
    <li>
        <img src="image4.jpg" />
    </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>

그런 다음 플렉스슬라이더로 호출을 설정합니다.

<script type="text/javascript" charset="utf-8">
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);
            }
        });
    }

});

});
</script>

기본적으로 두 슬라이더는 동일한 탐색 링크 세트에 의해 제어됩니다.이것이 올바른 방향으로 나아가게 할 것이라고 생각하지만 설명이 필요한 것이 있으면 소리쳐 보세요.

Flexslider 2의 경우 다음을 사용할 수 있습니다.sync: "selector"선택.그냥 슬라이더 중 하나만 설정하면 됩니다.controlNav: false.

$(window).load(function() {
    $('#main-slider').flexslider({
        animation: 'slide',
        controlNav: true,
        sync: '#secondary-slider'
    });

    $('#secondary-slider').flexslider({
        controlNav: false
    });
});

그래서, 저도 같은 문제를 겪고 있고, 그것은 정말 걸림돌이 될 수 있습니다.하지만 저는 아주 쉬운 빠른 해결책을 찾아냈습니다.이것은 부모 플렉스슬라이더에 의해 조종되는 1명 또는 100명의 아이들에게 효과가 있습니다.모든 작업에 적용됩니다.제가 이 문제를 해결하고 재싱크 방법을 위해 jquery 객체 배열을 허용하도록 그들을 설득할 수 있기를 바랍니다.

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
  </ul>
</div>

<div class="flexslider_children">
  <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>

<div class="flexslider_children">
  <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>

그럼 javascript는 그냥 실행해주세요.

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider({
  'slideshow': false, // Remove the animations
  'controlNav' : false // Remove the controls
}); 

/** 
* Set up the main flexslider
*/
$('.flexslider').flexslider({
  'pauseOnHover' : true,
  'animationSpeed': 2000,
  'slideshowSpeed': 5000,
  'initDelay': 3000,
  // Call the update_children_slides which itterates through all children slides 
  'before' : function(slider){ // Hijack the flexslider
    update_children_slides(slider.animatingTo);
  }   
}); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number){
  // Iterate through the children slides but not past the max
  for (i=0;i<children_slides.length;i++) {
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
  }   
}

도움이 되길 바랍니다!!제가 하려고 했던 것과 매우 유사하기 때문에 이를 추가했습니다. 플렉스슬라이더에서 여러 동기화를 사용하려고 하는 것은 저뿐만이 아닌 것 같습니다.

밴더스내치 씨의 솔루션이 효과가 있는지 확인하고 싶습니다.저는 그의 작품의 변형을 보여주기 위해 아래에 그의 코드를 수정한 글을 올립니다.

/** 
* Create the children flexsliders. Must be array of jquery objects with the
* flexslider data. Easiest way is to place selector group in a var.
*/
var children_slides = $('.flexslider_children').flexslider({
    slideshow: false, // Remove the animations
    controlNav : false, // Remove the controls
    animationSpeed: 1200,
    itemWidth: 175,
    itemMargin: 20,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize()
}); 


/** 
* Set up the main flexslider
*/
$('#flexslider_index_band_1').flexslider({
    pauseOnHover : true,
    animationSpeed: 1200,
    slideshow: false,
    initDelay: 3000,
    directionNav: true,
    animation: 'linear',
    easing: 'swing',
    animationLoop: false,
    controlsContainer: '.paginated_nav',
    directionNav: true,
    prevText: '',
    nextText: '',
    itemWidth: 175,
    itemMargin: 20,
    sync: '#flexslider_index_band_2',
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    // Call the update_children_slides which itterates through all children slides 
    before : function(slider){ // Hijack the flexslider
        update_children_slides(slider.animatingTo);
    }   
}); 

/** 
* Method that updates children slides
* fortunately, since all the children are not animating,
* they will only update if the main flexslider updates. 
*/
function update_children_slides (slide_number){
    // Iterate through the children slides but not past the max
    for (i=0;i<children_slides.length;i++) {
    // Run the animate method on the child slide
    $(children_slides[i]).data('flexslider').flexAnimate(slide_number);
    }   
}

});

제가 찾은 한 가지 해결책은 사용자 정의 배너 탐색을 만드는 것이었습니다.위치를 정하고 원하는 대로 스타일링 해주세요.유일하게 중요한 것은 그것을 목표로 하는 방법을 갖는 것입니다.이 예제에서는 slider-next와 slider-prev의 ID를 사용했습니다.

<ul>
  <li><a id="slider-next" href="#">Next</a></li>
  <li><a id="slider-prev" href="#">Prev</a></li>
</ul>

이제 두 개의 플렉서 슬라이더를 만들고 CSS에 원하는 대로 배치합니다.메인 배너 .flexslider와 캡션 .captions의 제목을 지정하겠습니다.

<div class="flexslider">
  <ul class="slides">
    <li><img src="/assets/images/banner-example.png" width="893" height="377"></li>
    <li><img src="/assets/images/banner-example-2.png" width="893" height="377" /></li>
    <li><img src="/assets/images/banner-example-3.png" width="893" height="377" /></li>
    <li><img src="/assets/images/banner-example-4.png" width="893" height="377" /></li>
  </ul>
</div>
<!-- Some other place in the code -->
<div class="captions">
  <ul id="info" class="slides">
    <li>
      <h2>Example Banner 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
    <li>
      <h2>Example Banner 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="read-more">Read More</a>
    </li>
  </ul>
</div>

이제 간단한 마법으로 효과를 볼 수 있습니다.javascript 파일에서 두 슬라이드를 모두 활성화하고 css에서 배너와 캡션의 탐색 컨트롤을 숨깁니다.이렇게 하면 사용자 지정 네비게이션이 보이는 유일한 컨트롤이 됩니다.그런 다음 클릭 시 슬라이더와 캡션의 컨트롤 탐색을 모두 트리거할 수 있는 함수만 생성하면 됩니다.아래의 예시..trigger jQuery 함수는 여기서 마법사가 수행하는 기능입니다.이 문서를 확인해 보세요. http://api.jquery.com/trigger/

//Load slider after .ready()
$(window).load(function(){

    //Activate Both Banner and Caption slides
    $('.flexslider').flexslider({
        controlNav: false,
    });

    $('.captions').flexslider({
        controlNav: false,
    });

    //Sink Control Navs
    $('#slider-next').click(function(){
        $('.flexslider .flex-next').trigger('click');
        $('.captions .flex-next').trigger('click');
    });

    $('#slider-prev').click(function(){
        $('.flexslider .flex-prev').trigger('click');
        $('.captions .flex-prev').trigger('click');
    })
});

언급URL : https://stackoverflow.com/questions/10171709/flex-slider-how-to-add-same-controls-for-two-sliders