-2

I have a slider from flex slider. With 4 images it works very well but when used with more than 5 images, thumbs view is not shown correctly. How can I fix this? Screenshot.

Vig
  • 342
  • 1
  • 7
Sasindu Jayampathi
  • 332
  • 7
  • 17
  • I think it would be better if you use the Thumbnail Slider, not the Thumbnail Navigation for it seems that TN Navigation only allows 4 images per row. Also, your images have different proportions. Try setting them as background-images for a fixed width/height element & that should do it. – Vig Nov 20 '17 at 12:12
  • 1
    Post your code please. We can't help you with code unless we see your source code. We can only make assumptions. – Nick Gatzouli Nov 20 '17 at 12:14
  • i posted my code as answer.please check that – Sasindu Jayampathi Nov 20 '17 at 12:19

1 Answers1

0

here my code

<div class="flexslider">
  <ul class="slides">
    <?php
      $pre_ads_images=$conn->query("SELECT * FROM files WHERE pid=".$ad_out['id']);
      while($ad_images=$pre_ads_images->fetch_assoc()){
        echo'
          <li data-thumb="'.$base_dir.'/uploads/post/'.$ad_images['uid'].'/'.$ad_images['name'].'">
            <img src="'.$base_dir.'/uploads/post/'.$ad_images['uid'].'/'.$ad_images['name'].'" alt="'.$ad_out['title'].' For Sale In '.$city_y['name'].'"/>
          </li>';
        }
   ?>
  </ul>
</div>
<script>$('.flexslider').flexslider({animation: "slide",controlNav: "thumbnails"});</script>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Sasindu Jayampathi
  • 332
  • 7
  • 17
  • Your problem isn't really the PHP bit but rather the CSS applied on your HTML structure. To be more specific: the thumbnails for 5+ images don't show up properly for 3 reasons: CSS code, non-fixed thumbnail size (also part of CSS code) and perhaps some bit of your HTML structure. – Nick Gatzouli Nov 20 '17 at 12:20
  • For a start, make sure your thumbnail images are of equal dimensions. This will make sure you don't get abnormal thumbnails at the bottom that will break the layout. – Nick Gatzouli Nov 20 '17 at 12:20
  • yes best idea is set maximum amount of thumb view image.thanks all for supporting me – Sasindu Jayampathi Nov 20 '17 at 12:22