Flexslider to load different slide on each time the page reloads

47 Views Asked by At

I am using this flexslider plugin for one of the projects with 3 videos and text over them. My issue is that sometimes when the page reloads it loads the same slide again. Is there any way to make sure that a new slide is loaded on page load? I have changed it to random, but the issue with that in some cases loads the same slide multiple times. Ideally we would have new content each time the page reloads.

https://www.jqueryscript.net/slider/Awesome-Fully-Responsive-jQuery-Slider-FlexSlider.html

Any suggestions on how can I tweak the script to load the next one on page load. No sliding effect needed.

Thank you.

$(window).on('load', function() {
 $('.flexslider').flexslider({
   animationLoop: false,
  randomize: true,
  controlNav: false,
  touch: true,
  directionNav: false,
   smoothHeight: true, 
    slideshow: false
 });
});
<div class="flexslider">
<ul class="slides">
    <li>
    <video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexels1-Nature.mp4" type="video/mp4" /></video>
    <div class="wrapper">
    <div class="container">
    <div class="row d-flex align-items-center">
    <div class="col-md-6 col-lg-5 ContentOverlay">
    SOME CONTENT HERE
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexels2-Tree.mp4" type="video/mp4" /></video>
    <div class="wrapper">
    <div class="container">
    <div class="row d-flex align-items-center">
    <div class="col-md-6 col-lg-5 ContentOverlay">
    SOME CONTENT HERE
    </div>
    </div>
    </div>
    </div>
    </li>
    <li>
    <video autoplay="" class="FullVideo" loop="" muted="" playsinline="" preload="auto"><source src="/Portals/0/Videos/Pexelsvideo-ladymp4.mp4" type="video/mp4" /></video>
    <div class="wrapper">
    <div class="container">
    <div class="row d-flex align-items-center">
    <div class="col-md-6 col-lg-5 ContentOverlay">
SOME CONTENT HERE
    </div>
    </div>
    </div>
    </div>
    </li>
</ul>
</div>

0

There are 0 best solutions below