CODEWITHSUNDEEP
javascriptjqueryhtmlslideshow
Justin
Justin

Reputation: 81

How can I make the slideshow pause on mouseover

Sorry for asking a pretty common question however I couldn't find how to fix that problem anywhere, and I have no idea how this slideshow works.

I want that slideshow to pause on mouseover and continue on mouseleave.

Here is the code below:

$(function() {
    $('#carousel').carouFredSel({
        width: 800,
        items: 4,
        scroll: 1,
        auto: {
            duration: 1250,
            timeoutDuration: 2500    
        },
        prev: '#prev',
        next: '#next',
        pagination: '#pager',
    });
});`

And the html code for the block: 

<!DOCTYPE html>
<html>
    <head>
        <!-- 
            This carousel example is created with jQuery and the carouFredSel-plugin.
            http://jquery.com
            http://caroufredsel.dev7studios.com
        -->
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." />
        <meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" />
        <title>Carousel with 3 images centered in rounded corners</title>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
        <script type="text/javascript" src="try.js"></script>
        <style type="text/css">
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }
            body {
                background-color: #f0f0f0;
                min-height: 700px;
            }
            body * {
                font-family: Arial, Geneva, SunSans-Regular, sans-serif;
                font-size: 14px;
                color: #333;
                line-height: 22px;
            }
            #wrapper {
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 100px;
                width: 800px;
                height: 127px;
                padding: 10px;
                margin: -75px 0 0 -410px;
                position: absolute;
                left: 50%;
                top: 50%;
            }
            .caroufredsel_wrapper {
                border-radius: 90px;
            }
            #carousel img {
                width: 201px;
                height: 127px;
                margin: 0 5px;
                float: left;
            }
            #prev, #next {
                background: transparent url( img/carousel_control.png ) no-repeat 0 0;
                text-indent: -999px;
                display: block;
                overflow: hidden;
                width: 15px;
                height: 21px;
                position: absolute;
                top: 65px;
            }
            #prev {
                background-position: 0 0;
                left: 30px;
            }
            #prev:hover {
                left: 29px;
            }            
            #next {
                background-position: -18px 0;
                right: 30px;
            }
            #next:hover {
                right: 29px;
            }                
            #pager {
                text-align: center;
                margin: 0 auto;
                padding-top: 20px;
            }
            #pager a {
                background: transparent url(img/carousel_control.png) no-repeat -2px -32px;
                text-decoration: none;
                text-indent: -999px;
                display: inline-block;
                overflow: hidden;
                width: 8px;
                height: 8px;
                margin: 0 5px 0 0;
            }
            #pager a.selected {
                background: transparent url(img/carousel_control.png) no-repeat -12px -32px;
                text-decoration: underline;                
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="carousel">
                <img src="img/up1.jpg" />
                <img src="img/up2.jpg" />
                <img src="img/up3.jpg" />
                <img src="img/up1.jpg" />
                <img src="img/up4.jpg" />
                <img src="img/up5.jpg" />
                <img src="img/up6.jpg" />
            </div>
            <a id="prev" href="#"></a>
            <a id="next" href="#"></a>
            <div id="pager"></div>
        </div>
    </body>
</html>

And the other two js file are in those link you can have a look.

jquery file second jquery file

You can see the current version at webmasteroutlet.com in the footer section. It doesn't pause on mouseover.

Upvotes: 0

Views: 4368

Answers (2)

Suresh Atta
Suresh Atta

Reputation: 121998

Have you tried this on mouseover ??

   $("#carousel").mouseover(function() {
  $("#carousel").trigger('pause' ,true);
  });

Upvotes: 0

Justin
Justin

Reputation: 81

here is what i did if anyone wnats to use it i changed the scroll element and it works just fine

scroll: {
                    items: 1,
                    duration: 1250,
                    timeoutDuration: 2500,
                    easing: 'swing',
                    pauseOnHover: 'immediate'   
                },

Upvotes: 1

Related Questions