CSS & javaScript slide animation without jQuery, something similar to jQuery Cycle 2? [closed]

Question

I've been using jQuery Cycle 2 now for some years, wondering if there is a way to accomplish most of what this does without the need for jQuery? http://jquery.malsup.com/cycle2/faq/

Here is a basic css fade in / fade out cycle transition.

    var actual = 0;
    var total = 3;

    function addClass(elem, name) {
        elem.className = elem.className + " " + name;
    }

    function deleteClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");
    }

    function nextImg() {
        var e;

        e = document.getElementById("img" + actual);
        deleteClass(e, "visible");

        actual++;
        if (actual > total - 1) actual = 0;

        e = document.getElementById("img" + actual);
        addClass(e, "visible");
    }

    var slider = setInterval(nextImg, 3000);

    .slide {
        border: none; 
        opacity: 0; 
        position: absolute; 
        top: 0; 
        left: 0;
        -webkit-transition: opacity .300s linear;
        -moz-transition: opacity .300s linear;
        -o-transition: opacity .300s linear;
        transition: opacity .300s linear;
    }
    .visible {
        opacity: 1;
    }

    <div class="header">
    <span id="img0" class="slide visible"><img src="1.jpg">Orlandos studio</span>
    <span id="img1" class="slide"><img src="2.jpg">Fida in Van</span>
    <span id="img2" class="slide"><img src="3.jpg">Eternalife Productions</span>
    </div>

Answer 1

I'm sure there is a shorter way to do this, however, this is my take on it. Does the same operation, just a little bit shorter.

var parent = document.getElementsByClassName("header")[0];
let i = 1;
let l = parent.children.length;

function imgCycle() {

  let pre = parent.children[((i - 1) < 0) ? l - 1 : i - 1]; // get previous holder of visible
  pre.className = pre.className.replace("visible", "");

  let e = parent.children[i];
  e.className += "visible";

  i = (i + 1) % l; // Make it loop around
}

var slider = setInterval(imgCycle, 3000);

.slide {
  border: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity .300s linear;
  -moz-transition: opacity .300s linear;
  -o-transition: opacity .300s linear;
  transition: opacity .300s linear;
}

.visible {
  opacity: 1;
}

<div class="header">
  <span id="img0" class="slide visible"><img src="1.jpg">Orlandos studio</span>
  <span id="img1" class="slide"><img src="2.jpg">Fida in Van</span>
  <span id="img2" class="slide"><img src="3.jpg">Eternalife Productions</span>
</div>

Answer 2

Checkout the below libraries:

I have not tried but there are many features, might be useful for you!

• https://github.com/ganlanyuan/tiny-slider
• https://github.com/gsantiago/vanilla-slider
• https://github.com/turivishal/Slide-Projection-Vanilla-JS/tree/0.0.1

---

I have been working on this Slide-Projection-Vanilla-JS library for the last 2 days and have done some basic things as JQuery Cycle 2 has.

There are no any documentation or readme for now, I will add it soon, but I have added all kind of examples for ready to use.

Below features that relates with Cycle 2 library, for more details you can checkout GitHub Repository,

• Next / Prev Controls
• Pause on Hover Controls
• Caption Controls
• Manual Fx Controls
• Overlay Options
• Speed Option
• Auto Play Option

Demo:

.center {
    text-align: center;
}

#pauser {
    width: 45%;
    padding: 30px;
    margin: auto;
    text-align: center;
    font-size: 16px
}

.info {
    padding: 5px 2px;
    color: #9B4D39;
    background: #FCE9E3;
    border: solid 1px #FBE1D5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/build/slide-projection.styles.min.css">
<h3 class="center">Slide Projection (SP)</h3>
<div class="sp-wrapper">
    <div 
        class="sp-slideshow" 

        data-sp-speed="4000"
        data-sp-auto-play="true"

        data-sp-fx="slide" 
        data-sp-fx-next="next-slide"
        data-sp-fx-prev="prev-slide"
        data-sp-fx-active="active-slide"
        data-sp-fx-initial="initial-slide"

        data-sp-caption-template="Slide {{slideNum}} of {{slideCount}}">

        <!-- empty element for caption -->
        <div class="sp-caption"></div>
        <div class="sp-overlay"></div>

        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat risus bibendum, luctus nunc et, ultricies mauris. Pellentesque sagittis euismod urna">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/demos/images/sp1.jpg" alt="SP1" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/demos/images/sp2.jpg" alt="SP2" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/demos/images/sp3.jpg" alt="SP3" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/demos/images/sp4.jpg" alt="SP4" />
        </div>
        <div class="sp-slide" data-sp-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
            <img src="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/demos/images/sp5.jpg" alt="SP5" />
        </div>

        <div class="sp-button-next"></div>
        <div class="sp-button-prev"></div>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/gh/turivishal/[email protected]/build/slide-projection.vanilla.min.js"></script>