1

looking for some simple clean code to write. When I launch a modal I want the slideshow to pause. I have modal triggers in the button class and a class. I tried something like this which I know is wrong, any ideas? Thanks. 

 <script type="text/javascript">

  $('.modal').on('shown.bs.modal', function (e) {
  $('.carousel').pause('slide.bs.carousel');
 })


</script>

Carousel Code

 <div class="row">
    <div class="carousel-container">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!--Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
      </ol>
      <!--Wrapper for Slides-->
      <div class="carousel-inner">
        <div class="item active" id="slide_1"></div>

        <div class="item" id="slide_2"></div>

        <div class="item" id="slide_3"></div>

        <div class="item" id="slide_4"></div>

        <div class="item" id="slide_5"></div>

        <div class="item" id="slide_6"></div>
      </div>
      </div>
   </div>
</div>
gwar9
  • 1,082
  • 1
  • 11
  • 28
  • did you try `.pause()` ? – Skwal Mar 26 '14 at 19:27
  • just tried, it still runs. – gwar9 Mar 26 '14 at 19:32
  • What kind of carousel/slideshow are you using? Did you try yo do a `console.log()` or `alert()` inside this function to see if it's actually triggered? – Skwal Mar 26 '14 at 19:36
  • Posted the code for the carousel, I've never done that before. I did check the console though, looks like .pause() needs an object. Updated the script added – gwar9 Mar 26 '14 at 19:45
  • @gwar9 Not tried `.pause()` method ? Is documentation available ? Is "slideshow" `animation` javascript / jquery , css , or both ? Thanks for sharing – guest271314 Mar 26 '14 at 20:10
  • hey guys thanks for the help, the live site is here: http://asla.org/yourpath/index.html I'm just tinkering locally at the moment. Modal triggers are the buttons at the bottom. I also plan to make the links under 'diverse voices' trigger modals (already done locally). Again, just looking for a way to pause the slides from rotating once a modal is triggered. Thanks! – gwar9 Mar 26 '14 at 20:14
  • @gwar9 Could post animation pieces ? Is animation javascript, css, or both ? Thanks for sharing – guest271314 Mar 26 '14 at 20:20
  • Uh, its bootstraps JS/Jquery can be found here: http://getbootstrap.com/javascript/#carousel and http://getbootstrap.com/getting-started/#download – gwar9 Mar 26 '14 at 20:23
  • @gwar9 Did not find `pause()` method documentation prominently displayed ? Have link to, or source of `.pause()` method ? Thanks for sharing – guest271314 Mar 26 '14 at 20:28
  • @gwar9 Would requirement include "restarting" `animation` at same or similar position at later portion of piece ? If possible, please describe requirement ? Thanks – guest271314 Mar 26 '14 at 20:31
  • The doc is in the first link I sent, under options – gwar9 Mar 26 '14 at 20:32
  • Yeah once the modal is dismissed I'd like the slideshow to pick back up where it was. – gwar9 Mar 26 '14 at 20:34

1 Answers1

3

According to Bootstrap's documentation, to pause the carousel you have to use .carousel('pause')

So try this:

$('.modal').on('shown.bs.modal', function (e) {
    $('.carousel').carousel('pause');
})
Skwal
  • 2,160
  • 2
  • 20
  • 30
  • Skwal, works like a charm, knew it was something simple, thanks a bunch. Someone up vote this please. Thanks for your help too guest271314 – gwar9 Mar 26 '14 at 21:03