我设法将缩略图卷轴放在一起，当您点击缩略图时，它会将缩略图滑动到左侧。这很棒，但是如果你点击左边的缩略图，我就无法弄清楚如何向后滚动它们。
$(function(){
var realSlider= $("ul#bxslider").bxSlider({
speed:1000,
pager:false,
nextText:'',
prevText:'',
mode: 'fade',
captions: true,
infiniteLoop:false,
hideControlOnEnd:true,
onSlideBefore:function($slideElement, oldIndex, newIndex){
changeRealThumb(realThumbSlider,newIndex);
}
});
var realThumbSlider=$("ul#bxslider-pager").bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 200,
slideMargin: 12,
moveSlides: 1,
pager:false,
speed:1000,
infiniteLoop:false,
hideControlOnEnd:true,
nextText:'<span></span>',
prevText:'<span></span>',
onSlideBefore:function($slideElement, oldIndex, newIndex){
/*$j("#sliderThumbReal ul .active").removeClass("active");
$slideElement.addClass("active"); */
}
});
linkRealSliders(realSlider,realThumbSlider);
if($("#bxslider-pager li").length<5){
$("#bxslider-pager .bx-next").hide();
}
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
$("ul#bxslider-pager").on("click","a",function(event){
event.preventDefault();
var newIndex=$(this).parent().attr("data-slideIndex");
bigS.goToSlide(newIndex);
});
}
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
var $thumbS=$("#bxslider-pager");
$thumbS.find('.active').removeClass("active");
$thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
else slider.goToSlide(slider.getSlideCount()-4);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.ambientlounge.com/external/custom-v2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.ambientlounge.com/external/custom-v2/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="http://www.ambientlounge.com/external/custom-v2/js/jquery.bxslider.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.ambientlounge.com/external/custom-v2/css/jquery.bxslider.css" />
<ul id="bxslider">
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-1.jpg" alt="Custom Branded 1" title="Ambient Lounge was commissioned by a large promotional company to develop dynamic bean bags for their beer and spirits group – for use at festivals and company sponsored events. The Becks bean bag main fabric is a custom pantone green waterproof material with white contrast piping to help highlight the the logo. The brand logo was positioned side, front and back of the bean bag to be highly visible. The result is beautiful." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-14.jpg" alt="Custom Branded 14" title="Australian Property Group Rockend wanted to stand out from the crowd when presenting their open house inspections. What better way than beautifully branded designer bean bags." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-13.jpg" alt="Custom Branded 13" title="Spotify wanted outdoor loungers for their spectacular media and music parties on the Skyline of Singapore. Wanting something of class to befit the brand, they went for our embroidered patches. " /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-12.jpg" alt="Custom Branded 12" title="Grffiths University University bought some bean bags from Ambient Lounge for O week (orientation week) where new students get to enjoy the facilities, concerts, speeches, films and really showcase the benefits of their University. The bean bags were beautifully printed and a huge hit." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-2.jpg" alt="Custom Branded 2" title="The same promotional company had Mikes hard lemonade in their stable of brands. Again the bean bag was tried in the custom pantone 'lemon' - which looked fantastic -however the company advised us that it was more in keeping with their promotional colours to use the black." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-3.jpg" alt="Custom Branded 3" title="The evolution from Custom Branded 2 brings us to the more correct version that we did for Mike's hard lemonade in black. We listened to them and added a transport bag that allows the company to deliver the bean bag furniture to events in a highly visual way s well as protecting the individual bean bags from scuffing." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-4.jpg" alt="Custom Branded 4" title="(Thredbo mountain Australia) Internationally renowned Veuve Cliquot run absolutely amazing events every year called Cliquot in the snow. We made bean bags in custom Veuve orange pantone that now only stood up to the blizzard conditions but looked bright and stunning scattered around the stark white backdrop of the mountain. Revellers had a unique experience of lounging around in the snow sipping champagne that they will never forget and the orange branding and luxurious experience would have left an everlasting impression on all that were invited." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-5.jpg" alt="Custom Branded 5" title="Nissan is one of the most recognised car brands in the world. For their test drive showrooms Ambient Lounge branded up many beautiful 'revved up' red bean bags with Nissan and their slogan at the time 'shift luxury'. It was visual and a great way to get their message across. Nissan also used the bean bags at events." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-6.jpg" alt="Custom Branded 6" title="This image was taken at London's Canary Wharf Film Festival. Although it was a rare sunny day in the old dart, punters had a completely unique way to view movies in total comfort in that country (although it is common in many other countries). Events like these are perfect to add sponsor logos to bean bag furniture." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-7.jpg" alt="Custom Branded 7" title="Cape Mentelle make some of the finest white wines (or any wines) in the world. Set in the most picturesque Margaret River Australia we made branded bean bag furniture that they could use outside at their outdoor cinema for special guess of the winery. Sipping fine wine, amidst beautiful gardens on designer branded bean bags. Total heaven and a marketers dream too." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-8.jpg" alt="Custom Branded 8" title="The Australian open tennis is an event that got over 600,000 people attending in both 2012 and 2013. Heineken are a main sponsor and one of the ways to have their brand totally immersed in the even is to provide branded bean bags in the outside areas of Rod Laver Arena. What that means is a high % of the 600,000 saw the bean bags and fought for the right to sit on them in Australia's summer. Huge success and the only problem was that we couldn't seat everybody!" /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-9.jpg" alt="Custom Branded 9" title="Realestate.com.au wanted an interior bean bag that reflected their designer properties and quality. We provided branded bean bags for their offices around Australia with embroidered logo on a colour that reflected their corporate identity. Tactile and beautiful – it was a great promotion." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-10.jpg" alt="Custom Branded 10" title="Rekorderlig Cider is a Swedish brand that make amazing cider! They loved our promotional branded bean bags so much that they did branded bean bags with us in multiple countries. Wherever you had the chance to see their promotions at events in Europe or Australia you could see our bean bags enjoyed by their super happy (drinking) crowd." /></li>
<li><img src="http://www.ambientlounge.com/external/custom-v2/images/custom-branded-11.jpg" alt="Custom Branded 11" title="Well we love Rekorderlig so much that we put in another pic. You think these guys are loving life or what?? They go away from events feeling so good. So, so much better than standing up or sitting on the grass and each branded bean bags comes at about the cost of a sign. This is branded signage that is truly interactive." /></li>
</ul>
<ul id="bxslider-pager">
<li data-slideIndex="0" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="1" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="2" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="3" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="4" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="5" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="6" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="7" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="8" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="9" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="10" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="11" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="12" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
<li data-slideIndex="13" class="thumb-item"><a href=""><img src="http://placehold.it/200x200"></a></li>
</ul>