JS slider not working properly

Hy guys!

I have a JS slider and I want it to slide the some content and an image which is being outputted by a php script.
Now the slider itself is working but the first slide when the page is loaded show the firs content (title, text ect.) without the image and then the firsr content and the thrid image looping forever (there are 3 item in the slides table).

What could be the problem?

This is how the script is look like now:

index.php

<script>
        $(function() {
          $('#slides').slidesjs({
            height: 235,
            navigation: false,
            pagination: false,
            effect: {
              fade: {
                speed: 400
              }
            },
            callback: {
                start: function(number)
                {
                    $("#slider_content").fadeOut(500);
                },
                complete: function(number)
                {
                    $("#slider_content" + number).delay(500).fadeIn(1000);
                }
            },
            play: {
                active: false,
                auto: true,
                interval: 6000,
                pauseOnHover: false,
                effect: "fade"
            }
          });
        });
        </script>



     <section class="container">
             <?php
              $pic = mysql_query("SELECT * FROM slides ORDER BY id DESC");
              while($row = mysql_fetch_object($pic))
              {
                ?>
             <h2 class="hidden">Slider</h2>

             <article id="slider_content">
                 <h3><?= $row->title ?></h3>
                 <p><?= $row->slide_text ?></p>

                 <a class="button" href="<?= $row->slide_link ?>">Show</a>
             </article>
               <div id="slides">
                   <img src="/content_man2/admin_panel/slider/img/<?= $row->image_s ?>">
               </div>
               <?php }
                ?>
           </section>

#boxcontent
{
        width:auto;
        max-width:900px;
        margin:0 auto;
        padding:70px 0 45px 0;
}

#boxcontent article
{
        float:left;
        width:250px;
        margin-right:45px;
        font-size:14px;
}

#boxcontent article h3
{
        font-family: 'Open Sans', sans-serif;
        font-size:20px;
        margin-bottom:10px;
        margin-left:75px;
}

#boxcontent article img
{
        float:left;
}

#boxcontent article p
{
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        margin-left:75px;
}

#slider_content
{
        line-height: 25px;
        font-family: 'Open Sans', sans-serif;
        width:350px;
        position:absolute;
  
        left:50px;
        display:none;
        z-index:11;
}

#slider_content h3
{
        color:#EBE8DE;
        font-size:25px;
        font-weight:bold;
        margin-bottom:10px;
        background-color:#333333;
        padding:10px 15px;
        border-radius: 0px 0 0px 0;
        display:inline-block;
}

#slider_content
{
        display:block;
}

#slider_content p
{
        margin:0 0 30px 0;
        color:#4a463b;
        background-color:#EBE8DE;
        padding:10px 15px;
        border-radius: 5px;
}

.slidesjs-container
{
        border-top: 1px #d6d0c1 solid;
        width:500px;
}
#slides
{
        display: none
}

.container
{
        max-width: 980px;
        height: 350px;
        margin: 0 auto;
        position:relative;
}
.slidesjs-pagination .active
{
        color:red;
}

#slider_content p .responsive_button
{
        display:none;
        color:#000;
}

.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}




@media (max-width: 1215px)
{
        #slider_content
        {
                width:auto;
                margin-right:50px;
        }
        #slider_content h2
        {
                font-size:18px;
        }
        #slider_content p
        {
                font-size:14px;
        }
        #slider_content p .responsive_button
        {
                display:inline;
        }
        .container .button
        {
                display:none;
        }
}

Hi, could you make a JSFiddle which reproduces your problem?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.