Carousel Gallery3D

3D gallery carousel with forced loop behavior and clickable side items.

Functional setup

Code for this example

1 Header Code <head> content and required stylesheets

<link rel="stylesheet" href="assets/css/zoroslider.vendor.min.css">
<link rel="stylesheet" href="assets/css/zoroslider.core.min.css">
<link rel="stylesheet" href="assets/css/demo.css">

2 Slider HTML Code Main Slider markup and layer structure

<div id="example-slider">
  <ul class="zoro-slider">
    <li data-bg-image="img/a01.jpg">
      
    </li>
    <li data-bg-image="img/a02.jpg">
      
    </li>
    <li data-bg-image="img/a03.jpg">
      
    </li>
    <li data-bg-image="img/a04.jpg">
      
    </li>
    <li data-bg-image="img/a05.jpg">
      
    </li>
    <li data-bg-image="img/a06.jpg">
      
    </li>
    <li data-bg-image="img/a07.jpg">
      
    </li>
  </ul>
</div>

3 Slider Configuration Code </body> scripts and initialization options

<script src="assets/js/libs/jquery-3.6.0.min.js"></script>
<script src="assets/js/libs/jquery-migrate-3.3.2.min.js"></script>
<script src="assets/js/libs/plyr/plyr.min.js"></script>
<script type="module" src="assets/js/zoroslider.jquery.min.js"></script>
jQuery(function ($) {
  $('#example-slider').zoroSlider({
  "layout": "fullWidthScoped",
  "width": 1120,
  "height": 520,
  "transitionSpeed": 450,
  "controls": false,
  "dotsNav": true,
  "dotsStyle": "drawcircle",
  "carousel": {
    "active": true,
    "type": "gallery3d",
    "visibleSlides": 3,
    "centerMode": true
  }
});
});