Skip to content
📽️ Quickly deploy full page slick slider to a project.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.sass-cache
css
docs
js
.gitignore
README.md
index.html

README.md

Slick Slider Quick Start

Quickly deploy full page slick slider to a project. Slider includes both images and video.

View Slick Slider: https://kenwheeler.github.io/slick/.

Installation

Git

Install: git clone https://github.com/DanCanetti/slick-slider-quick-start.git

Move css/ and js to root and tidy (may require sudo): mv slick-slider-quick-start/css/ ./ && mv slick-slider-quick-start/js/ ./ && rm -rf slick-slider-quick-start/

The index.html contains the below slider layout - to use copy where indicated and paste into your file. Remember to include the CSS and JS in the relevant directories.

Slider HTML

<!-- Copy Here -->
<div class="slider-wrapper">
  <div class="toggle-buttons">
    <button id="tog-slider">Slider One</button>
    <button id="tog-alt-slider">Slider Two</button>
  </div>

  <div class="overlay">
    <h1>This is a demo.</h1>
  </div>
  <div class="slider">
    <div><img src="public/img/red.jpg" alt="red" /></div>
    <div><video width="100%" height="100%" autoplay loop muted><source src="Spacer-Blackvideo/sea.mp4" type="video/mp4">Your browser does not support the video tag.</video></div>
    <div><img src="public/img/yellow.jpg" alt="yellow" /></div>
    <div><img src="public/img/blue.jpg" alt="blue" /></div>
  </div>

  <div class="slider-alt">
    <div>
      <img src="public/img/red.jpg" alt="red" />
      <span class="slide-overlay">
        <h1>Slide One</h1>
      </span>
    </div>
    <div>
      <video width="100%" height="100%" autoplay loop muted><source src="public/video/sea.mp4" type="video/mp4">Your browser does not support the video tag.</video>
      <span class="slide-overlay">
        <h1>slide Two</h1>
      </span>
    </div>
    <div>
      <img src="public/img/yellow.jpg" alt="yellow" />
      <span class="slide-overlay">
        <h1>Slide Three</h1>
      </span>
    </div>
    <div>
      <img src="public/img/blue.jpg" alt="blue" />
      <span class="slide-overlay">
        <h1>Slide Four</h1>
      </span>
    </div>
  </div>
</div>
<!-- End Copy Here -->

Demo Assets

Red Lego photo by Nathan Duck.

Blue and yellow Lego photos by Ryan Quintal.

Sea video by Pixabay.

You can’t perform that action at this time.