1

I'm fetching data using for loop and echo results on a page. How do I output the results in a slider effect?

I have tried a simple CSS slider but can't get the intended result. What I end up getting is everything output in page and no sliding effect.

Part of my PHP code that echo the output...

for ($i=0, $n=count($rows); $i < $n; $i++) {
    //echo "<tr><td>".
    ($row = $rows[$i]);
    //."</td></tr>";
    $link_detail = JRoute::_('index.php?option=com_jblance&view=user&layout=viewprofile&id='.$row->user_id.$Itemid); 
    $link_invite = JRoute::_('index.php?option=com_jblance&view=project&layout=invitetoproject&id='.$row->user_id.'&tmpl=component');
    ?>

        <div class="slider">
            <div class="media style_prevu_kit">
                <div class="center">
                    <?php 
                    if($show_logo){
                        $link = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
                        $attrib = 'style="width: 162px; height: 162px; float:center; margin: 0 auto; border-radius: 100px"';
                        //echo JblanceHelper::getLogo($row->user_id, $attrib);
                        echo "<a href='".$link_detail."' class='link'>".JblanceHelper::getLogo($row->user_id, $attrib)."</a>";
                        //echo $link_detail;
                    } ?>
                </div>
                <div class="media-body">
                    <h5><?php //$username = LinkHelper::GetProfileLink($row->user_id, $row->$nameOrUsername);
                    $getUsername = $row->$nameOrUsername;
                    $nameorUsername = truncate($getUsername, 5);
                    echo LinkHelper::GetProfileLink($row->user_id, $nameorUsername);
                    //echo truncate($username, 15);
                    ?></h5>
                    <?php //<?php echo JblanceHelper::getCategoryNames($row->id_category, 'tags-link', 'user'); ?>
                    </span>
                    <br /><br />

                </div>
                <div class="center">
                        <a href="<?php echo $link_invite; ?>" class="jb-modal" rel="{handler: 'iframe', size: {x: 650, y: 400}}"><input type="button" value="Hire Me" class="button_add button_curved_blue color-a"></a>
                </div>
                <div class="lineseparator"></div>
                <div class="container">
                    <div class="content">
                      <div class="grid-2">
                        <button class="color-b circule"> <i class="fab fa-dribbble fa-2x"></i></button>
                        <h6 class="title-2">12.3k</h6>
                        <p class="followers">Followers</p>
                      </div>
                      <div class="grid-2">
                        <button class="color-c circule"><i class="fab fa-behance fa-2x"></i></button>
                        <h6 class="title-2">16k</h6>
                        <p class="followers">Followers</p>
                      </div>
                      <div class="grid-2">
                        <button class="color-d circule"><i class="fab fa-github-alt fa-2x"></i></button>
                        <h6 class="title-2">17.8k</h6>
                        <p class="followers">Followers</p>
                      </div>
                    </div>
                  </div>    
            </div>
        </div>
<?php
}

A very simple slider CSS...

.slider {
    white-space: nowrap;
    oveflow:hidden;
}
.slider>div {
    white-space: normal; /* reset "nowrap" above */
    display: inline-block;
    transition: margin-left 0.8s cubic-bezier(0.5, 0.1, 0.5, 1.25);
    /* the above transition gives a neat little "bounce-back" effect */
}

And 1 line of JavaScript...

<script>
    theSlider.children[0].style.marginLeft = (-100*pageID)+"%";
</script>

What I get now is this...

enter image description here

While I need all 8 cards to automatically be sliding in 1 row or to have previous and next buttons to transition between the cards.

  • The Javascript you added is probably part of a Javascript plugin. Have you imported it? Without it, you'll probably be getting an error in your browser console saying theSliider is undefined. – Lodder Apr 17 at 6:35
  • There used to be core code for creating Tabs and Sliders but they relied on mootools and will be depreciated in J! 4.0, but for the tabs there is a replacement, JHtml::_('bootstrap.startTabSet') which you can read about,joomlashack.com/blog/tutorials/tabs-bootstrap. I can't find an equivalent replacement for Sliders yet but the above link might be a starting point to find out more. – Irata Apr 17 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.