Repository files navigation

Add image sliders to Jekyll withIdeal Image Slider. HTML include version. No plugin necessary. Fully compatible with Github Pages.

View alive demo running on Github Pages. The code and configuration for the demo is in thegh-pages branch.

1. AddIdeal Image Slider files to your site.

2. Add_data/sliders.yml to your site.

3. Add the_includes folder and all contents to your site.

4. Includeslider_styles.html in your theme head. Change the paths in this file to the location of the styles in your site.

   {% include slider_styles.html %}

5. Includeslider_scripts.html in your theme just before the</body> tag. Change the paths in this file to the location of the scripts in your site.

   {% include slider_scripts.html %}

Create a slider by adding data to_data/sliders.yml, adding a selector to theimage_sliders front matter variable and includingslider.html while passing in the slider selector. View the code in thegh-pages branch for a live example.

Create a slider by adding data to_data/sliders.yml. The format for slider data is shown below. See theIdeal Image Slider settings for a description of each setting. Note thatbullets andcaptions are boolean (true/false) andclasses is unsupported.

- selector:  bullets:  captions:  images:    - data-src:      data-src-2x:      src:      title:      alt:      href:  settings:    height:    initialHeight:    maxHeight:    interval:    transitionDuration:    effect:    disableNav:    keyboardNav:    previousNavSelector:    nextNavSelector:

Here is an example slider, with some images, alt text and captions:

- selector: example_slider  captions: true  images:    - src: /img/1.jpg      alt: image one    - src: /img/2.jpg      alt: image two    - src: /img/3.jpg      alt: image three  settings:    height: "'auto'"    effect: "'fade'"

Use theimage_sliders variable to add slider selectors to the front matter of a page or layout. This tells Jekyll to load the correct slider scripts and styles on that page or layout:

image_sliders:  - example_slider

Includeslider.html where you want the slider to appear within the page or layout. Pass the slider selector into the include. This tells Jekyll to search in_data/sliders.yml for slider data where the selector equalsexample_slider and use that data to create an image slider:

{% include slider.html selector="example_slider" %}

Setimage_sliders_load_all: true in the front matter of an index page or archive page to load sliders in post content displayed on that page. For example if you are displaying post excerpts on your home page, setimage_sliders_load_all: true and any image sliders appearing within post excerpts will load correctly on your home page.