Question

我有一个带2个箭头的滑块。当然是下一个和上一个。我想制作一些缩略图，当我点击一个以将滑块更改为该幻灯片时。

实施例：如果我单击缩略图4，滑块将显示第四张图像。

代码jQuery：

jQuery(function($) {
var $hSlider = $('.horz-slider');

$hSlider.each(function(index, el) {
    var $slider = $(this),
        $btns = $('#' + $slider.attr('id') + '-buttons');

    $slider
        .find('.slide')
        .css({
            width: $slider.width()
        });

    $slider
        .find('.slides')
        .cycle({
            log: false,
            timeout: 0,
            slides: '>.slide',
            fx: 'scrollHorz',
            prev: $btns.find('.l-btn'),
            next: $btns.find('.r-btn')
        });
    });
});

HTML：

<div id="vacantion-slider" data-cycle-timeout="4000" class="slider horz-slider">
    <div class="slides">
        <div class="slide">
            <a href=""><img src="http://placehold.it/660x290" alt=""></a>
            <div class="caption clearfix">
                <a href="" class="rd-button">Galerie foto1</a>
                <a href="" class="rd-button">Vezi harta</a>
            </div>
        </div>
        <div class="slide">
            <a href=""><img src="http://placehold.it/660x290" alt=""></a>
            <div class="caption clearfix">
                <a href="" class="rd-button">Galerie foto2</a>
                <a href="" class="rd-button">Vezi harta</a>
            </div>
        </div>
    </div>
    <div id="vacantion-slider-buttons" class="top-right-slider-nav">
        <a href="#" class="l-btn">&lt;</a>
        <a href="#" class="r-btn">&gt;</a>
    </div>
</div>

谢谢

我找到了怎么做。

HTML：

<ul id="thumb"> </ul>

jQuery的：

pager: '#thumb',
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" /></a></li>'; 
}

CSS：

#thumb { 
  width: 100%; 
  height: 80px; 
  margin: 20px 5px; 
}
#thumb li { 
  width: 60px; 
  float: left; 
  margin: 12px; 
  list-style: none 
}
#thumb a { 
  width: 60px; 
  padding: 3px; 
  display: block; 
  border: 3px solid #FFFFFF;
  border-radius:3px;
  box-shadow: 1px 1px 3px #333333;
}
#thumb li.activeSlide a { 
  border: 3px solid #0a526f;
  border-radius:3px;
  box-shadow: 1px 1px 3px #333333;
}
#thumb a:focus { 
  outline: none; 
}
#thumb img { 
  border: none; 
  display: block;
}

带有缩略图和导航箭头的jQuery Slider

0 个答案: