Why I can't use sliding pictures in modal window

Question

I have one button, when click on him I created to open modal window. In modal window I created carousel slider, i have problem with sliding on chevron left and right, thats not working, on my computer images sliding on 5 seconds, but on jsfiddle sliding not working, can you tell me what is problem with sliding on chevron left and right. On my big project I have 2 sliders, and when i click on chevron in modal window my page scrolling down

JSFIDDLE http://jsfiddle.net/3kgbG/802/

HTML

  <button class="btn btn-lg btn-block" data-toggle="modal" data-target=".bs-example-modal-lg">CLICK HERE</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
       <divclass="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://cdn.banquenationale.ca/cdnbnc/2013/06/ruisseau.jpg">
                        </div>

                        <div class="item">
                           <img src="http://pixdaus.com/files/items/pics/4/68/127468_81126581de22e05a9a66d3216ae2b4ad_large.jpg">
                        </div>

                        <div class="item">
                            <img src="http://www.naturehighlights.com/images/25.1_Canada.jpg">
                        </div>
                    </div>

                    <a class="left carousel-control" href="#locations" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#locations" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>

                </div>
        </div>
    </div>
</div>

Manwal · Answer 1 · 2015-07-15T11:58:03.567

1

Give id to your carousel and just add following jquery lines:

$(function(){
  $('#carousel').carousel();
});

Working DEMO

Update: same slider id you have to give on left and right button.

See Updated DEMO Its working with left right button also.

edited Jul 15 '15 at 11:58

answered Jul 15 '15 at 11:53

Manwal

23,450
12
63
93

Slider not working, when I click on circle right or left – RS92 Jul 15 '15 at 11:55

Vishnu · Accepted Answer · 2015-07-15T12:14:03.850

1

you forgot the id of the Carousel and you mixed class attribute with div tag.

<div id="locations" class="carousel slide" data-ride="carousel">

Updated Fiddle link

<a class="left carousel-control" data-target="#locations" data-slide="prev">
     &lsaquo;
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#locations" data-slide="next">
     &rsaquo;
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>

edited Jul 15 '15 at 12:14

answered Jul 15 '15 at 11:55

Vishnu

11,614
6
51
90

not working in my case, i don't know why, when i click on right my backgroumd page scrolling down, indicator right and left not working, i also change locations to locations3 on all place – RS92 Jul 15 '15 at 12:06
i solved on down hwere is chevron right or left, i replace href with data-target and working – RS92 Jul 15 '15 at 12:14
do you know how to set fixed widht and height, and into that window to show picture fitted to modal display, because now my window moving top and down when sliding picture because widht and height of picture not same – RS92 Jul 15 '15 at 12:20
@RS92 http://stackoverflow.com/questions/13391566/twitter-bootstrap-carousel-different-height-images-cause-bouncing-arrows – Vishnu Jul 15 '15 at 12:23

Why I can't use sliding pictures in modal window

2 Answers2