jQuery FlexSlider скрывает Slider, но сохраняет видимость ручного управления - PullRequest
Новая
       11

jQuery FlexSlider скрывает Slider, но сохраняет видимость ручного управления

0 голосов
/ 17 марта 2012

Я пытаюсь скрыть FlexSlider, за исключением некоторых миниатюр. При нажатии на миниатюры FlexSlider появляется и перемещается к соответствующему соответствующему слайду.

Основная проблема, с которой я столкнулся, заключается в том, что когда FlexSlider скрыт, элементы управления также скрыты. Есть ли способ разделить их, чтобы я мог видеть элементы управления (представленные серией точек в демонстрации FlexSlider) постоянно видимыми? Затем я мог бы прикрепить обработчик onClick / fadeIn, чтобы ползунок мог перейти к нужному слайду.

В настоящее время я использую метод External Scaffold, найденный на GitHub, для использования пользовательского контейнера Manual Controls, потому что кажется, что он освободил slideTo (), который, как мне кажется, лежит в моей проблеме, но я не На 100% уверен. Эту 'Внешнюю леску' Стивена можно найти здесь: https://github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js

Однако этот метод ManualControls также работает: jquery Flexslider ручное управление не работает

Кто-нибудь еще пытался достичь подобного результата? Я не нашел всплывающего слайдера, как я описываю, но я думаю, что это желаемая функциональность для многих людей (и их клиентов!).

Я поместил работающий пример на эту скрипту JS, чтобы проверить: http://jsfiddle.net/uxCzq/

В нижней левой части экрана вы можете видеть «точки» / навигацию, но когда вы скрываете ползунок, навигация также исчезает, несмотря на то, что вы находитесь за пределами элемента, содержащего ползунок.

Кто-нибудь может мне помочь ?? Я был бы в долгу перед вами!

1 Ответ

3 голосов
/ 28 марта 2012

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

Мое решение состояло в том, чтобы сделать следующее (извините - я бы разбил ваш jsfiddle, но подумал, что это будет быстрее и чище.

Первая настройка разметки: 

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

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="demo-stuff/inacup_samoa.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
            <p class="flex-caption">This image is wrapped in a link!</p>
        </li>
        <li>
            <img src="demo-stuff/inacup_donut.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
    </ul>
  </div>

Обратите внимание на атрибут rel в ссылках - мы будем использовать их ниже. Также обратите внимание, что значения начинаются с 0 - это соответствует значениям для слайдов (например, первый слайд - 0, второй - 1 и т. Д.).

Вы должны установить значение no в элементе flexslider в вашем css. (более доступный способ сделать это - скрыть слайдер за экраном, используя абсолютное позиционирование, и вернуть его на экран по запросу, но в интересах упрощения, я просто буду показывать / скрывать)

Далее настройте свой вызов на плагин flexslider: 

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        directionNav: true,
        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>

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

...