how to create random image slider using lightslider and pdo

I am trying to create a dynamic content slider which includes images and text using LightSlider plugin. However, I know that need to use order by rand, and I'm lost several days on google for try to find solution or similar example, but sure, dont exist anywhere something similar.

So, what I need is to display all 50 articles randomly. Does anyone know how I can do that? Please help.

This is short my html code

<section class="products">
    <!-- slider box -->
    <ul id="autoplay" class="cs-hidden">
     <li class="item-a"><article class="product"><a href="Hotel-Villa-Matic.html"><img src="images/Matic/SMALL/HotelVillaMatic.jpg" alt="Hotel Villa Matić"/><div class="text"><h2>HOTEL VILLA MATIĆ</h2></div></a></article><!-- end .product--></li>
     <li class="item-a"><article class="product"><a href="Apartments-Mampas.html"><img src="images/Mampas/SMALL/ApartmaniMampas.jpg" alt="Apartmani Mampas"/><div class="text"><h2>APARTMANI MAMPAS</h2></div></a></article><!-- end .product--></li>
     <li class="item-a"><article class="product"><a href="Brod-Ivana-Panoramska-voznja.html"><img src="images/Ivana/SMALL/BrodIvana.jpg" alt="Brod Ivana Neum"/><div class="text"><h2>VOŽNJA BRODOM</h2></div></a></article><!-- end .product--></li>
     <li class="item-a"><article class="product"><a href="Apartments-Liberan.html"><img src="images/Liberan/SMALL/ApartmaniLiberan.jpg" alt="Apartmani Liberan"/><div class="text"><h2>APARTMANI LIBERAN</h2></div></a></article><!-- end .product--></li>
     </ul>
      </section>*/

which need to be written inside php class like example bellow:

class Slider{
    public function renderSlider(){
        $renderSlider = "<section class='products'>";
        $renderSlider .= "<ul id='autoplay' class='cs-hidden'>
        <li class='item-a'><article class='product'>";
        $renderSlider .= "<a href='$this->url'>";
        $renderSlider .= "<img src='images/'.$this->img . 'alt=$this->alt'/>";
        $renderSlider .= "<div class='text'>";
        $renderSlider .= "<h2>". $this->title ."</h2>";
        $renderSlider .= "</div></a></article>";
        $renderSlider .= "</li></ul></section>";
    }
    }

And this is code for mysql:

--
-- Table structure for table `lightslider`
--

DROP TABLE IF EXISTS `lightslider`;
CREATE TABLE IF NOT EXISTS `lightslider` (
  `lightslider_id` int(11) NOT NULL AUTO_INCREMENT,
  `href` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `img` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `alt` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`lightslider_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='Table with information about image slider';

--
-- Dumping data for table `lightslider`
--

INSERT INTO `lightslider` (`lightslider_id`, `href`, `img`, `alt`, `title`) VALUES
(1, 'Hotel-Villa-Matic.html', 'HotelVillaMatic.jpg', 'Hotel Villa Matić', 'HOTEL VILLA MATIĆ'),
(2, 'Apartments-Mampas.html', 'ApartmaniMampas.jpg', 'Apartmani Mampas', 'APARTMANI MAMPAS'),
(3, 'Brod-Ivana-Panoramska-voznja.html', 'BrodIvana.jpg', 'Brod Ivana Neum', 'VOŽNJA BRODOM'),
(4, 'Apartments-Liberan.html', 'ApartmaniLiberan.jpg', 'Apartmani Liberan', 'APARTMANI LIBERAN');
COMMIT;

Each answer means a lot to me, so thank you in advance, with the hope that someone will help me.