Animation of slider

Status
Niet open voor verdere reacties.

julianmurillo

Gebruiker
Lid geworden
15 jan 2018
Berichten
41
Hi allemaal


Ik heb de volgende slider:

HTML:
<div class="slider-content slider-section" style="max-width: 500px;">
    <img class="slides" src="" /> 
    <img class="slides" src="" style="width: 100%;" /> 
    <img class="slides" src="" style="width: 100%;" /> 
    <img class="slides" src="" style="width: 100%;" /> 
    <img class="slides" src="" style="width: 100%;" /> 
    <img class="slides" src="" style="width: 100%;" />
</div>

    <script type="text/javascript">// <![CDATA[
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("slides");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";  
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}    
        x[myIndex-1].style.display = "block";  
        setTimeout(carousel, 3000); // Change image every 3 seconds
    }
    // ]]></script>

Hoe kan ik het aanpassen (animatie implementeren) zodat elke afbeeldingen wordt naar links geschoven elke 3 seconden? Zoals het nu opstaat wordt de afbeelding meteen vervangen door de volgende, wat niet zo leuk eruitziet.

Dank voor jullie hulp :)
 
Niet het antwoord op je vraag maar dit (klik) is een fantastische swiper/slider waar je alles mee kan doen wat je vraagt (en meer)

Of is het een (school)opdracht of een cursus zodat je vast zit aan de code die je nu hebt?
 
Hallo,

De code heb ik hier en daar aangepast:

HTML:
<style>
#slides {
    position: relative;
    height: 200px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    left:100%;
}

.showing {
    opacity: 1;
    z-index: 2;
    left:0%;
}

img {
   height: 100%;
}
</style>

<ul id="slides">
<li class="slide showing"><img src="" style="width: 100%;" /></li>
<li class="slide"><img src="" style="width: 100%;" /></li>
<li class="slide"><img src="" style="width: 100%;" /></li>
<li class="slide"><img src="" style="width: 100%;" /></li>
<li class="slide"><img src="" style="width: 100%;" /></li>
</ul>

<script type="text/javascript">
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
var afterSlide = 1;

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}
</script>

Het issue is dat elke afbeelding nu naar rechts wordt geschoven voor de volgende naar links komt. Hoe kan ik het aanpassen zodat elke afbeelding naar links wordt geschoven terwijl de volgende ook naar links komt?
 
De swiper/slider die ik bij #2 noemde is simpel. Hieronder een voorbeeld. Meer mogelijkheden vind je in de API van de slider. Zet scripts vlak boven </body>
Code:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swiper - Slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css">
</head>
<body>

<!-- volgende regel de afmeting van de foto's -->
<div class="swiper-container" style="width:150px; height:100px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img3.jpg" alt=""></div>
        <div class="swiper-slide"><img src="img4.jpg" alt=""></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
<script>
(function() {
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay: { delay: 5000 },
        delay: 2000
    });
})();
</script>

</body>
</html>
Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan