Skip to main content

slider plugin

the first neo-jquery plugin for the use of delizables this plugin is independent of the module it can be used in the same way only in a special way

install​

npm i neo-jquery-slide

note: the module does not require the neo-jquery module because it is included in case of plugins.

using cdn​

<!-- css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neo-jquery-slide/style.css">

<!-- scripts -->
<script src="https://cdn.jsdelivr.net/npm/neo-jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/neo-jquery-slide"></script>

example html​

<!-- Slideshow container -->
<section class="slideshow-container">
  <!-- Full-width images with number and caption text -->
  <figure class="content mySlides fade">
    <img src="https://s3.tproger.ru/uploads/2020/07/field.jpg" alt="slide" class="slideshow-image" />
    <figcaption class="text">Caption Text</figcaption>
  </figure>

  <figure class="content mySlides fade">
    <img src="https://s3.tproger.ru/uploads/2020/07/rose.jpg" alt="slide" class="slideshow-image" />
    <figcaption class="text">Caption Two</figcaption>
  </figure>

  <figure class="content mySlides fade">
    <img src="https://s3.tproger.ru/uploads/2020/07/leaf.jpg" alt="slide" class="slideshow-image" />
    <figcaption class="text">Caption Three</figcaption>
  </figure>

  <!-- Next and previous buttons -->
  <span class="prev">&#10094;</span>
  <span class="next">&#10095;</span>
</section>

<!-- The dots/circles -->
<section class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</section>
$slider(".mySlides").showSlider(1);

module using​

using with cjs

const $slider = require('neo-jquery-slide');

$slider(".mySlides").showSlider(1);

using with esm

import $slider from 'neo-jquery-slide'

$slider(".mySlides").showSlider(1);

example​