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.

2
  • 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, 2019 at 6:35
  • 1
    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, 2019 at 9:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.