Spider

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu

<div class="spider-container">
  <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>
  </div>
</div>

Arrow and Dots

<div class="spider-container">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Multi display

<div class="spider-container my-slider">
  <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

<style>
@media (min-width: 1024px) {
  .my-slider .spider__slide {
    max-width: calc(50% - 10px);
  }
  .my-slider .spider__slide:not(:last-child) {
    margin-right: 20px;
  }
}
</style>

Using id selector

<div id="using-id-selector">
  <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

<script>
var spider = new Spider('#using-id-selector');
</script>

Fade

[data-fade="true"] is not support multi display

<div class="spider-container" data-fade="true">
  <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Thumbnail gallery

<div class="spider-container">
  <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots" data-thumbnails="true">
    <button class="spider__dot" data-id="0" data-id="0">
      <img class="spider__figure" src="img/blue.jpg" alt="">
    </button>
    ...
  </div>
</div>

Auto play

Slide

<div class="spider-container" data-interval="2000">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__stop" title="Stop auto play">⏸</button>
    <button class="spider__start" title="Start auto play">▶</button>
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Multi Slide

<div class="spider-container my-slider" data-interval="5000">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Fade

<div class="spider-container" data-interval="2000" data-fade="true">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__stop" title="Stop auto play">⏸</button>
    <button class="spider__start" title="Start auto play">▶</button>
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Full width

Slide

<div class="spider-container alignfull">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

<style>
.alignfull {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.alignfull img {
  width: 100%;
  max-width: none;
}
</style>

Fade

<div class="spider-container alignfull" data-fade="true">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

<style>
.alignfull {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.alignfull img {
  width: 100%;
  max-width: none;
}
</style>

Shifted

CSS custom properties are not support IE

<div class="spider-container shifted alignfull">
    <div class="spider">
    <!-- The width of .spider__reference is the reference for the scroll position. -->
    <div class="container">
      <div class="spider__reference"></div>
    </div>
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <div class="spider__arrows">
      <button class="spider__arrow" data-direction="prev">Prev</button>
      <button class="spider__arrow" data-direction="next">Next</button>
    </div>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

<style>
.shifted .spider__canvas::before,
.shifted .spider__canvas::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: calc((var(--spider--canvas-width) - var(--spider--reference-width)) / 2);
}
.shifted .spider__slide {
  --my-slide-items-count: 2;
  max-width: calc(var(--spider--reference-width) / var(--my-slide-items-count) - 20px * (var(--my-slide-items-count) - 1) / var(--my-slide-items-count));
}
.shifted .spider__slide:not(:last-child) {
  margin-right: 20px;
}
.shifted .spider__arrows {
  max-width: var(--spider--reference-width);
  left: calc(50% - var(--spider--reference-width) / 2);
}
</style>

Customizing animation speed

Slide

<div class="spider-container" data-duration="5000">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Fade

<div class="spider-container" data-fade="true" data-duration="2000">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Shuffle slides

Slide

<div class="spider-container" data-shuffle="true">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Fade

<div class="spider-container" data-fade="true" data-shuffle="true">
    <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots">
    <button class="spider__dot" data-id="0">0</button>
    ...
  </div>
</div>

Thumbnail gallery

<div class="spider-container">
  <div class="spider">
    <div class="spider__canvas">
      <div class="spider__slide" data-id="0">
        <img class="spider__figure" src="img/blue.jpg" alt="">
      </div>
      ...
    </div>

    <button class="spider__arrow" data-direction="prev">Prev</button>
    <button class="spider__arrow" data-direction="next">Next</button>
  </div>

  <div class="spider__dots" data-thumbnails="true">
    <button class="spider__dot" data-id="0">
      <img class="spider__figure" src="img/blue.jpg" alt="">
    </button>
    ...
  </div>
</div>

GitHub: https://github.com/inc2734/spider