0

I am trying to create a slider for my blog, slider has thumbs under it, I need to pass values (id and image) used in slider to thumbs to make it work.

I need your help, I got slider part but dont know how to pass values to thumbs part. Thanks for any help or a good example link.

Here is my slider code:

What I tried is bellow. I dont have an idea what to try for thumbs so dont have examples I tried.

<div class="slider-holder">
<div class="slider">
    <div class="arrs">
        <a href="#" class="prev-arr" title="<?php $d; ?>"></a>
        <a href="#" class="next-arr" title="<?php $d; ?>"></a>
    </div>
    <ul>
    <?php
    $cid = intval(1);
    $getir = postslider($cid);
    foreach($getir as $row){ ?> 
    <li id="img<?php echo intval($row['id']);?>">
        <div class="slide-cnt">
            <h2><?php echo filter_text($row['title']);?></h2>
            <p><?php echo filter_text($row['subject']);?></p>
            <a href="<?php echo filter_text($row['news_url']);?>/" title="<?php echo filter_text($row['title']);?>"><strong>more</strong></a>
        </div>
        <img src="images/posts/<?php echo $row['img'];?>" alt="<?php echo filter_text($row['title']);?>" title="<?php echo filter_text($row['title']);?>" height="300" width="400"/>
    </li>
    <?php } unset($stmtc); ?>
    </ul>
    </div>
    <!-- end of slider -->  

    <!-- thumbs -->
    <div id="thumbs-wrapper">
    <div id="thumbs">
        <a href="#img1" class="selected"><img src="css/images/thumb.png"/></a>
        <a href="#img2"><img src="css/images/thumb2.png" /></a>
        <a href="#img3"><img src="css/images/thumb3.png" /></a>
        <a href="#img4"><img src="css/images/thumb4.png" /></a>
        <a href="#img5"><img src="css/images/thumb.png" /></a>
        <a href="#img6"><img src="css/images/thumb2.png" /></a>
        <a href="#img7"><img src="css/images/thumb3.png" /></a>
        <a href="#img8"><img src="css/images/thumb4.png" /></a>
    </div>
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
    </div>
    <!-- end of thumbs -->              
</div>
Tedi insan Kaynakları
  • 1
  • 1

1 Answers1

0

You could set an empty container with an ID and an image tag inside to display the images. Then using jQuery, get the image src from the thumbnail image and insert it to the display container. Have a look at those links :)

jQuery get the image src

https://www.w3schools.com/jquery/jquery_dom_get.asp

ASG
  • 513
  • 3
  • 10