jssor gallery with bootstrap

Question

I use the jssor gallery with bootstrap. as soon as i add bootstrap breadcrumbs (ordered or unordered list) the gallery is having a bug. when I press different photos they change the main image but the hole page jumps to the top.

Here is the page with the problem. here is the code i use:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 676px;height: 530px; overflow: hidden;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 676px; height: 415px; overflow: hidden;">
        <div>
            <img u="image" src="#imageurl#" alt="" />
            <img u="thumb" src="#imageurl#" />
        </div>
    </div>
    <!-- Thumbnail Navigator Skin Begin -->
    <div u="thumbnavigator" class="jssort01" style="position: absolute; width: 676px; height: 100px; left:0px; bottom: 0px;">
        <!-- Thumbnail Item Skin Begin -->
        <div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="position: absolute; width: 122px; height: 74px; top: 0; left: 0;">
                <div class="w">
                    <div u="thumbnailtemplate" style="width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;">
                    </div>
                </div>
                <div class="c">
                </div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- Thumbnail Navigator Skin End -->
    <!-- Trigger -->
</div>
<!-- Jssor Slider End -->

the js:

var options = {
    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)       
    $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
        $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
        $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
        $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
        $Cols: 5,                             //[Optional] Number of pieces to display, default value is 1
        $Align: 360                           //[Optional] The offset position to park thumbnail
    }           
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);

I will appreciate any help.

Answer 1

You placed jssor slider in an <a> element, when you click on it, it opens a new page.

Please check out the following codes,

<a href="http://143-mifgashim.2beweb.co.il/document/52,76,1.aspx" li="" <="">
    <div class="col-xs-12 col-md-9 col-md-push-3">
        <div class="row divShowMain">
        <div>
        <div class="divShowMainGalleryTitle #imagestotal#">תמונות מתוך ההצגה                 </div>
        <div id="slider1_container" style="left: 0px; top: 0px; width: 676px; height: 530px; overflow: hidden; position: relative;">
...
</a>