Multiple Items carousel with jquery or bootstrap

Simon Leung
Simon Leung used Ask the Experts™
on
Is it possible to load the image files in my image folder and create a multiple items carousels with jquery or bootstrap ? Any example or reference,

Is there any recommended image size or ratio for the image showing as the banner of the webpage ?

Thx
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I do prefer to code image link manually to control the result, as someone may put an image into the directory by mistake and i don't want this to appear online ;)

There is one old script that can do that so you can get some code inspiration and adapt newer script
https://github.com/justinwhall/directorySlider
https://justinwhall.com/directory-jquery-slider/

You can use PHP script with Owl or Revolution slider

Here is an example you will need to adapt with your classes
Notes:
You may want to have the first image with active class depending of the scipt you use.
Some script have image QTY set so you may need to adapt that options to unlimited..

<?php
$dirname = "gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
  ?>
   <div class="item"><img src="<?php echo $image; ?>" /></div>
  <?php
}

Open in new window


For best responsive result  I'm using slider-revolution
https://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
with their editor to get best responive result and save a lot of time
https://codecanyon.net/item/slider-revolution-jquery-visual-editor-addon/13934907

or free option OWL Carousel 2
https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial