Question

I added new template for wordpress, and use template on my page to have fully output like have main slider horizontal and inner slider in each slide is vertical, all full width and full height,my code::

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://miluxe.ir/wp-content/themes/woodmart/js/splide/splide-core.min.css">
  <script src="https://miluxe.ir/wp-content/themes/woodmart/js/splide/splide.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      new Splide('#ihxx-splide', {
        gap: "0px",
        pagination: false,
        type       : 'loop',
      }).mount();
    });
    
    document.addEventListener('DOMContentLoaded', function () {
      new Splide('#ihxx-innersplide1', {
        gap: "0px",
        pagination: false,
        wheel    : true,
        direction: 'ttb',
        height   : '100vh',
         arrows: false,
      }).mount();
    });
/*like other*/
    document.addEventListener('DOMContentLoaded', function () {
      new Splide('#ihxx-innersplide5', {
        gap: "0px",
        pagination: false,
        wheel    : true,
        direction: 'ttb',
        height   : '100vh',
         arrows: false,
      }).mount();
    });
  </script>
  <title>SplideJS</title>
<style>
body,#ihxx-splide,.splide__slide {
    margin: 0;
    padding: 0;
    height: 100vh !important;
    width: 100vw !important;
}
.splide__arrows.splide__arrows--ltr {
    position: absolute;
    bottom: 0;
    right: 50%;
    z-index: 11;
}
</style>
</head>
<body>

<div id="ihxx-splide" class="splide">
    <div class="splide__track">
        <ul class="splide__list">

            <li class="splide__slide">
                 <div id="ihxx-innersplide1" class="splide">
                <div class="splide__track">
                    <ul class="splide__list">
                        <li class="splide__slide" style="background: green;">innerSlide 01</li>
                        <li class="splide__slide" style="background: black;">innerSlide 02</li>
                        <li class="splide__slide" style="background: white;">innerSlide 03</li>
                        <li class="splide__slide" style="background: gray;">innerSlide 04</li>
                    </ul>
                </div>
            </div>
            </li>

/*4 other li like first one*/

        </ul>
    </div>
</div>



</body>
</html>

why 4th and 5th inner slider not work? slide do right, but inner slider now show!
output html is like simple ul>li

why 4th and 5th inner slide in splide.js not worked?

LEAVE A COMMENT Hủy