Member Avatar for patk570

Hello everyone,

I am looking for a banner/slider for both images and text. I want to be able to display 3 articles that are attached to the blog I am making and have them rotate, Here is an image of where the content will go.

47dd24c076f663f88f6d78c35f640cc9

I would like a slider like this one: but with the query string and while string to show in the right places. Any ideas would be helpful, I already have a php code for this:

  <div>
  <?php
            $sql = 'SELECT * FROM `blog` ORDER BY `id` DESC LIMIT 0,3';
            $result = mysql_query($sql);

            while ($record = mysql_fetch_assoc($result)){
              $url = $record['productname'];
              $text = $record['price'];
              echo'<img src="images/blog/'.$record['img'].'" alt="pic" width="252" height="109" />';
              echo' <h3>'.$record['blogtitle'].',</h3>';
              echo' <p class="midText">';?><?php $position=22;

                $message=$record['article'];
                $post = substr($message, 0, $position);

              echo $post;
              echo '...<font size="-2"><a href="blog.php?blogid='.$record['id'].'">Read More</a></font>'; ?>
              echo'</p>';
              echo'<p class="midText2">Next article will show here.</p>';
            }


    ?>
    </div>

thanks!

  • 2 Contributors
  • 2 Replies
  • 412 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by patk570

Dani AI

Generated

Short answer: render a predictable HTML structure for each article from PHP (or return JSON) and let a small jQuery routine reveal the parts in sequence: image → title → excerpt → “next” text. To answer : yes, spit the HTML from PHP (or build the DOM from JSON). : the simplest approach is one slide element per article with separate child elements for each part, and a tiny JS function that fades/slides those children one after another.

Example markup you can output from server-side code:

<div id="slider">
  <div class="slide" data-id="123">
    <div class="media"><img src="/uploads/123.jpg" alt="Article image"></div>
    <h3 class="title">Article title</h3>
    <p class="excerpt">Short excerpt... <a href="/blog.php?blogid=123">Read More</a></p>
    <p class="nextText">Next article will show here.</p>
  </div>
  <!-- repeat for the 3 articles -->
</div>

Small jQuery sequence (chain callbacks so each part appears only after the previous one finished):

(function($){
  var slides = $('#slider .slide'), idx = 0, interval = 6000, timer;
  function reveal(s){
    s.find('.media img').hide().fadeIn(400, function(){
      s.find('.title').hide().slideDown(250, function(){
        s.find('.excerpt').hide().fadeIn(250, function(){
          s.find('.nextText').fadeIn(150);
        });
      });
    });
  }
  function show(i){
    slides.hide();
    var s = slides.eq(i).show();
    s.find('.media img, .title, .excerpt, .nextText').hide();
    reveal(s);
  }
  function start(){ timer = setInterval(function(){ idx = (idx+1) % slides.length; show(idx); }, interval); }
  $('#slider').on('mouseenter', function(){ clearInterval(timer); }).on('mouseleave', start);
  show(0); start();
})(jQuery);

Quick troubleshooting and best practices:

  • Do not use deprecated mysql_* calls; use PDO or mysqli with prepared statements and escape output with htmlspecialchars.
  • Give images width/height or set a fixed slider height to avoid layout jumps. Preload or use loading="lazy" if you have many images.
  • If animation stutters, ensure slides are absolutely positioned (so hiding/showing does not reflow) and clear intervals before starting a new cycle.
  • Consider building slides server-side for simplicity, or expose a small JSON endpoint and build DOM on page load if you want dynamic refresh without a full page reload.

This structure makes it straightforward to tweak timing, add pause-on-hover, or swap in CSS transitions later.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

I'm lost as to what you want. The sample html for the slider in one the page you linked to. Can't you spit out the html from php?

Member Avatar for patk570

What i am trying to acheive here is have the slider move all the elements that is listed in the php code, by using something similar to the one i posted but have the elements on a delay, The picture should go first, the title, quick text and next article should go after that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.