1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make image slider autoplay

Discussion in 'WordPress' started by jeff7xs, Dec 4, 2010.

  1. #1
    I use a template monster wordpress template, with an image slider in the header. It is called Wrappet slider function as I can see in header php.
    Any idea how I can do it autoplay?
    Thanks.

    Here below is the code:

    /* container for slides */
    .images {
    position:relative;
    height:379px;
    width:968px;
    float:left;
    cursor:pointer;


    }

    /* single slide */
    .images div {
    display:none;
    position:absolute;
    top:0;
    left:0;width:968px;
    padding:0 0 0 0;
    height:379px;
    font-size:12px;
    }

    .img-slider{ position:absolute;}
    .wrappet-slider-text{ background:url(images/wrapper_slider_text.png) 0 0 no-repeat; width:287px; height:337px; top:0; left:681px; display:block; position:relative;}
    .wrappet-slider-text-indent{ padding:71px 0 0 41px; display:block}


    /* header */
    .wrappet-slider-text-indent h3{ color:#14b5ff; font-size:76px;}


    /* tabs (those little circles below slides) */
    .tabs {
    /*margin:337px 0 0 657px;*/
    left:666px; top:346px;
    /**margin:344px 0 0 -304px;*/
    background:url(images/slider_bg2.png);
    width:311px;
    height:42px;
    position:absolute;

    }

    /* single tab */
    .tabs a {
    width:19px;
    height:19px;
    float:left;
    margin:14px 6px 0 0;
    background:url(images/navigato.gif) 0 0 no-repeat;
    display:block;
    font-size:1px;
    }

    /* mouseover state */
    .tabs a:hover {
    background-position:0 -19px;
    }

    /* active state (current page state) */
    .tabs a.current {
    background-position:0 -19px;
    }


    /* prev and next buttons */
    .forward, .backward {
    float:left;
    margin-top:140px;
    background:#fff url(images/hori_lar.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    cursor:pointer;
    font-size:1px;
    text-indent:-9999em;
    }

    /* next */
    .forward { background-position: 0 -30px; clear:right; }
    .forward:hover { background-position:-30px -30px; }
    .forward:active { background-position:-60px -30px; }


    /* prev */
    .backward:hover { background-position:-30px 0; }
    .backward:active { background-position:-60px 0; }

    /* disabled navigational button. is not needed when tabs are configured with rotate: true */
    .disabled {
    visibility:hidden !important;
    }
    .tabs-inner{ padding:0 0 0 24px; display:block;}
    .slider-indent-button{ position:absolute; margin:346px 0 0 868px; *margin:353px 0 0 -90px;}
    .slider-indent-button a{ color:#14b5ff; font-size:15px; margin-right:16px; line-height:29px;}
    .slider-indent-button button{ background:none; border:none; color:#14b5ff; font-size:15px; text-decoration:underline; line-height:21px;}
    .slider-indent-button button:hover{ text-decoration:none;}
    .slider-main-text{ font-size:15px; line-height:19px; color:#575d60; width:217px; margin:-24px 0 0 0;}
    .row-slider-button{ padding:1px 0 0 0;}
    .row-slider-button .slider-text1{ color:#45c1ff; font-size:17px; font-weight:bold; line-height:35px;}
    .row-slider-button .slider-text2{ color:#3a3a38; font-size:22px; margin-left:2px; font-weight:bold;}
    .button-slider-text{
    background:url(images/button_slider_text.png) 0 0 no-repeat;
    display:block; float:right;
    width:96px; height:33px;
    margin:0 38px 0 0;
    *margin:0 18px 0 0;
    text-align:center;
    color:#3a3a38; font-size:15px;
    text-decoration:none;
    line-height:30px;
    }
    .button-slider-text:hover{ text-decoration:underline; color:#3a3a38;}
     
    jeff7xs, Dec 4, 2010 IP
  2. steers82

    steers82 Peon

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It has nothing to do with the CSS. Most sliders operate using jQuery. Usually what you have to do is open plugins > editor then a file that might be just for the gallery eg yourplugin/gallery.php and there may be a tag in there that has autoplay="0" - or you might have to change something in the js function.
     
    steers82, Dec 4, 2010 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    I second that "steers82".

    CSS does the styling, do not control functionality.
     
    radiant_luv, Dec 4, 2010 IP
  4. thenetspiders

    thenetspiders Active Member

    Messages:
    341
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #4
    As per my experience if you are using any Slider plug in it will automatic do all the thing but call it in header.php.........but smooth slider in word press u work will ease like install the plug in and call the plugin function's if condition after post display........will solve ur problemmmmmmmmm

    i also face this problem........
     
    thenetspiders, Dec 6, 2010 IP
  5. olddocks

    olddocks Notable Member

    Messages:
    3,275
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    215
  6. jeff7xs

    jeff7xs Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    thanks, it worked perfectly!
     
    jeff7xs, Dec 9, 2010 IP