Light-weight jQuery Carousel Plugin Centered on Search engine optimization – seo-slider

A light-weight jQuery plugin to simply create sliders/slideshows/carousels which are indexable, user-friendly, and search engine optimized. A key profit is that the primary slide shows with out JavaScript, which might enhance Core Net Vitals’ LCP (Largest Contentful Paint) metric essential for Search engine optimization. 

The plugin gives an optimum stability of usability and Search engine optimization-friendliness for builders who wish to add a slider to their web site. Its light-weight code retains pages quick whereas offering mandatory navigation and results.

Learn how to use it:

1. Obtain and cargo the seo-slider plugin’s information in your jQuery mission.

<!-- 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 construction.

• Embed the primary (hero) picture with the fetchPriority=”excessive” attribute.
• Embed the opposite pictures with the fetchPriority=”low” loading=”lazy” attributes for sooner web page loading pace.

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

  <!-- Slide 1 -->
  <div> 
    <!-- Caption 1.1 -->
    <div fashion="left: 10%; prime: 15%; colour: #fff; font-size: 4vw;" class="font-bold">
      Caption 1.1
    </div>
    <!-- Caption 2 -->
    <div fashion="left: 49%; prime: 45%;" class="caption-border-shadow">
      Caption 1.2
    </div>
    <!-- load the primary picture with excessive precedence -->
    <img fetchPriority="excessive" class="w-full h-auto" src="hero.jpg"/>
  </div>

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

  <!-- Extra Slides Right here -->

</div>

3. Initialize the seo-slider plugin.

$(doc).prepared(operate() 
  $("#slider").delSlider();
});

This superior jQuery plugin is developed by deloma-de. For extra Superior Usages, please test the demo web page or go to the official web site.