- 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'"

2. Add image_sliders front matter variable

Use the image_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

3. Include slider.html

Include slider.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 equals example_slider and use that data to create an image slider:

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

Sliders on index and archive pages

Set image_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, set image_sliders_load_all: true and any image sliders appearing within post excerpts will load correctly on your home page.

Happy to show you this website I developed. is a virtual store for the sale of football boots and accessories. - Visit the site: https://lnkd.in/eWCgTGZE - See the code of this and my other sites in my Github repository: https://lnkd.in/eFuig9aa Works done: - Site design. - Layout with HTML and CSS - Alignment using Flexbox and Grid CSS - Fully responsive site, adaptable to any mobile device. - Using JavaScript perform the following interactions: - Automatic image slider - Carrucel of featured articles. - Modal window for description of the selected product. - Drop-down accordion with store information. - Button to open hidden menu on mobile devices. - To load products simulate a database with a local json file and make the request through fetch to print the elements in the DOM. - Product cards are objects. - All product cards include a button to open the modal window with the description and another button to add the product to the shopping cart. - Through a button in the navigation menu we can open the shopping cart with the loaded products. Hope you like !!