所以我会认为这会非常简单，但我一直在寻找并尝试建议，但我似乎无法让这个工作：
我正在使用JQuery flexslider，我希望能够在幻灯片中创建简单链接以导航到其他幻灯片。
我发现这篇文章似乎是在描述它（jQuery FlexSlider - Link to specific image），但我根本无法让它发挥作用。链接不起作用。
我在flex滑块github上看到了这个建议，但我无法弄清楚如何使用它：$（'＃slider'）。flexslider（3）//去第四张幻灯片。
有人能够这样做吗？非常感谢任何帮助/回复。
`
$(window).ready(function() {
$('.flexslider').flexslider({
animation: 'fade',
animationLoop: false, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
slideshow: false, //Boolean: Animate slider automatically
slideshowSpeed: 0, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 800, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true,
pauseOnAction:true,
controlNav: true,
directionNav: true,
controlsContainer: '.flex-container',
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);
}
});
var toptitle = $('.slider-1 .flex-active-slide h2').data('toptitle');
var topimage = $('.slider-1 .flex-active-slide .item').data('topimage');
var bottomtext = $('.slider-1 .flex-active-slide p').data('bottomtext');
var bottomlinks = $('.slider-1 .flex-active-slide .links').data('bottomlinks');
$('.slider-1 .flex-active-slide').find('.item').css({ top: topimage});
$('.slider-1 .flex-active-slide').find('.item').animate({ right: '0', opacity: '1'}, 1000);
$('.slider-1 .flex-active-slide').find('h2').animate({ left: '0', top: toptitle, opacity: '1'}, 1500);
$('.slider-1 .flex-active-slide').find('p').animate({ left: '0', bottom: bottomtext, opacity: '1'}, 1500);
$('.slider-1 .flex-active-slide').find('.links').animate({ left: '0', bottom: bottomlinks, opacity: '1'}, 1800);
// remove class loading after start
slider.removeClass('loading');
},
before: function(slider) {
$('.slider-1 .flex-active-slide').find('.item').animate({ right: '-100%', opacity: '0'}, 1000);
$('.slider-1 .flex-active-slide').find('h2').animate({ left: '0', top: '-100%', opacity: '0'}, 1500);
$('.slider-1 .flex-active-slide').find('p').animate({ left: '0', bottom: '-50%', opacity: '0'}, 1500);
$('.slider-1 .flex-active-slide').find('.links').animate({ left: '0', bottom: '-100%', opacity: '0'}, 1800);
},
after: function(slider) {
var toptitle = $('.slider-1 .flex-active-slide h2').data('toptitle');
var topimage = $('.slider-1 .flex-active-slide .item').data('topimage');
var bottomtext = $('.slider-1 .flex-active-slide p').data('bottomtext');
var bottomlinks = $('.slider-1 .flex-active-slide .links').data('bottomlinks');
$('.slider-1 .flex-active-slide').find('.item').css({ top: topimage});
$('.slider-1 .flex-active-slide').find('.item').animate({ right: '0', opacity: '1'}, 1000);
$('.slider-1 .flex-active-slide').find('h2').animate({ left: '0', top: toptitle, opacity: '1'}, 1500);
$('.slider-1 .flex-active-slide').find('p').animate({ left: '0', bottom: bottomtext, opacity: '1'}, 1500);
$('.slider-1 .flex-active-slide').find('.links').animate({ left: '0', bottom: bottomlinks, opacity: '1'}, 1800);
}
});`
HTML
<div class="flex-container">
<div class="flexslider loading">
<ul class="slides">
<li class="slide-bg-color">
<div class="container">
<p>slide 1 content</p>
<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><!-- End Container -->
</li><!-- End item -->
<li class="slide-bg-color">
<div class="container">
<p>slide 2 content</p>
<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><!-- End Container -->
</li><!-- End item -->
<li class="slide-bg-color">
<div class="container">
<p>slide 3 content</p>
<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><!-- End Container -->
</li><!-- End item -->
</ul>
</div>
</div>