Home: http://bxslider.com/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="slider_wrap"> <ul id="custom_slider" class="bxslider"> <li><img src="../images/6customization/glasses templete.png" /></li> <li><img src="../images/6customization/glasses templete.png" /></li> <li><img src="../images/6customization/glasses templete.png" /></li> <li><img src="../images/6customization/glasses templete.png" /></li> <li><img src="../images/6customization/glasses templete.png" /></li> </ul> </div> <div id="custom_slider_pager"> <a data-slide-index="0" href=""><img src="../images/6customization/cutomization_7a.png" /></a> <a data-slide-index="1" href=""><img src="../images/6customization/cutomization_7b.png" /></a> <a data-slide-index="2" href=""><img src="../images/6customization/cutomization_7c.png" /></a> <a data-slide-index="3" href=""><img src="../images/6customization/cutomization_7a.png" /></a> <a data-slide-index="4" href=""><img src="../images/6customization/cutomization_7b.png" /></a> </div> <a href="#" class="slider_nav left"></a> <a href="#" class="slider_nav right"></a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var slide_count = $('.bxSlider').children().not('.bx-clone').size(); slider = $('.bxSlider').bxSlider({ pager: false, controls: true, onSlideAfter: function(){ //Hide/Show nav when it's the first or last slide var index = slider.getCurrentSlide(); if(index > 0){ $('.bx-wrapper .bx-prev').show(); } if(index == 0){ $('.bx-wrapper .bx-prev').hide(); } if(slide_count > 0){ $('.bx-wrapper .bx-next').show(); } if(index == (slide_count - 1)){ $('.bx-wrapper .bx-next').hide(); } } }); slider.goToSlide(index); |
|
1 2 3 4 5 6 7 8 9 10 11 |
$('.bxslider').bxSlider({ minSlides: 11, maxSlides: 12, slideWidth: 70, slideMargin: 15, nextSelector: '#slider-next', prevSelector: '#slider-prev', pager: false, controls: true, auto: true }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
.slider_wrap{ } /* Remove Default shadow and border */ .bx-wrapper{ box-shadow: none; border: 0; } /* end */ /* Remove Default shadow and border(Old version maybe) */ .bx-wrapper .bx-viewport{ -webkit-box-shadow: none; box-shadow: none; border: 0; left: 0; background: transparent; } .bxslider{ list-style: none; padding: 0px; margin: 0px; } .bxslider li{ width: 70px; height: 70px; overflow: hidden; float: left; margin: 0px 15px 15px 0px; border-radius: 5px; } .bxslider li img{ width: 100%; height: 100%; } .slider_nav{ display:block; position: absolute; background: url(../images/arrow.png) no-repeat; width: 10px; height: 16px; top:25px; overflow: hidden; } .slider_nav a{ padding-left:10px; } .slider_nav.left{ left:-10px; } .slider_nav.right{ background-position: 0px -16px; right:-10px; } /* Pager styles */ .bx-wrapper .bx-pager{ position: absolute; bottom: 15px; } /* Square Pagers */ .bx-wrapper .bx-pager.bx-default-pager a{ -webkit-border-radius: 0px; border-radius: 0px; } /* End Pager styles */ /* Override Default nav */ .bx-wrapper .bx-controls-direction a{ width: 18px; height: 52px; } .bx-wrapper .bx-prev { left: 10px; background: url(../../images/about/left_arrow.png) no-repeat 0 0; } .bx-wrapper .bx-prev:hover { background-position: 0 -52px; } .bx-wrapper .bx-next { right: 10px; background: url(../../images/about/right_arrow.png) no-repeat 0 0; } .bx-wrapper .bx-next:hover { background-position: 0 -52px; } |
Issue: Controllers might not work after “goToSlide()”.
Solution:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
var slider = null; $(document).ready(function(){ var $current_brand = $('.bxslider li:eq(' + current_index + ') a'); $current_brand.addClass('active_brand'); $current_brand.find('img').attr('src', $current_brand.attr('data-over')); slider = $('.bxslider').bxSlider({ nextSelector: '#bxnext', prevSelector: '#bxprev', pager: false, minSlides: 7, maxSlides: 7, moveSlides: 0, slideWidth: 100, slideMargin: 32, infiniteLoop: true, //This line could cause some other problems startSlide: current_index, onSliderLoad: slider_loaded }); }); function slider_loaded(index){ //This is the key! slider still could be null even in onSliderLoad if(slider == null){ setTimeout(function () { // interval function body slider_loaded(index); }, 100); return; } var page = Math.ceil((current_index + 1) / 7); //7 is the number of displayed items //var current = slider.getCurrentSlide(); //console.log('Count: ' + slider.getSlideCount()); //console.log('Current: ' + index); //console.log('page: ' + page); slider.goToSlide(page-1); } |
Note:
It’s possible to show current slide in the middle and show part of previous and next slide.
The key is to use “slideWidth” option.