Lightweight jQuery Carousel Plugin Focused on SEO - seo-slider

A lightweight jQuery plugin to easily create sliders/slideshows/carousels that are indexable, user-friendly, and search engine optimized. A key benefit is that the first slide displays without JavaScript, which can improve Core Web Vitals' LCP (Largest Contentful Paint) metric crucial for SEO. 

The plugin provides an optimal balance of usability and SEO-friendliness for developers who are looking to add a slider to their site. Its lightweight code keeps pages fast while providing necessary navigation and effects.

How to use it:

1. Download and load the seo-slider plugin's files in your jQuery project.

<!-- jQuery & jQuery UI Required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

<!-- jQuery seo-slider -->
<script src="/path/to/deloma-slider.css"></script>
<script src="/path/to/deloma-slider.js"></script>

2. The required HTML structure.

• Embed the first (hero) image with the fetchPriority="high" attribute.
• Embed the other images with the fetchPriority="low" loading="lazy" attributes for faster page loading speed.

<div id="slider" class="del-slider">

  <!-- Slide 1 -->
  <div> 
    <!-- Caption 1.1 -->
    <div style="left: 10%; top: 15%; color: #fff; font-size: 4vw;" class="font-bold">
      Caption 1.1
    </div>
    <!-- Caption 2 -->
    <div style="left: 49%; top: 45%;" class="caption-border-shadow">
      Caption 1.2
    </div>
    <!-- load the first image with high priority -->
    <img fetchPriority="high" class="w-full h-auto" src="hero.jpg"/>
  </div>

  <!-- Slide 2 -->
  <div>  
    <!-- Caption 2-->
    <div style="left: 7%; top: 86%; color: #fff; font-size: 2.3vw;" class="font-bold">
      Caption 2
    </div>
    <!-- load with low priority and lazy load -->
  <img fetchPriority="low" loading="lazy" class="w-full h-auto" src="2.jpg"/>
  </div>

  <!-- More Slides Here -->

</div>

3. Initialize the seo-slider plugin.

$(document).ready(function() 
  $("#slider").delSlider();
});

Changelog:

2023-09-25

• JS & CSS update

---

This awesome jQuery plugin is developed by deloma-de. For more Advanced Usages, please check the demo page or visit the official website.