Flex Slider - Как добавить одинаковые элементы управления для двух слайдеров
Я использую Flex slide r для одного проекта. Мне нужно управлять двумя ползунками на одной странице с одинаковыми элементами управления.
Одна часть - это основной слайдер, на котором будут отображаться изображения, а вторая - текст (в этом случае он будет взят из "the_excerpt" в WP).
По сути, это код, который я использую для вызова двух слайдов на одной странице:
$(window).load(function() {
$('#main-slider').flexslider({
animation: 'slide',
controlsContainer: '.flex-container'
});
$('#secondary-slider').flexslider();
});
Теперь мне нужно "соединить" их оба с одним и тем же элементом управления, поэтому, когда я нажимаю на стрелку, они оба скользят / исчезают.
5 ответов
Вы можете выполнить то, что вы пытаетесь сделать, отключив настройку controlsContainer и создав собственную навигацию, которую вы затем связываете с обоими ползунками. Вот идея о том, как (пожалуйста, обратите внимание, что это не проверено)
Ваша разметка будет выглядеть примерно так. Обратите внимание на атрибут 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>
Затем вы настраиваете вызов FlexSlider
<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 ребенка или ста детей, находящихся под контролем на родительском flexslider. Работает на все действия. Надеюсь, я смогу уговорить их исправить это и разрешить массив объектов 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);
}
}
Надеюсь это поможет!! Обратите внимание, что я добавил это, потому что это очень похоже на то, что я пытался сделать. Похоже, я не единственный, кто хочет использовать несколько синхронизаций в flexslider.
Я хочу подтвердить, что решение MrBandersnatch работает. Я публикую свои изменения его кода ниже, чтобы показать вариацию его работы.
/**
* 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.
<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');
})
});