Création d'un curseur d'image à l'aide de JS et CSS Tutoriel

Création d’un curseur d’image à l’aide de JS et CSS Tutoriel

Dans ce didacticiel, vous apprendrez à créer un Curseur d’images utilisant Javascript et CSS. Le didacticiel vise à fournir aux étudiants en informatique et aux nouveaux programmeurs une référence pour apprendre à mettre en œuvre une fonctionnalité créative d’application Web à l’aide de Javascript et Feuille de style en cascade (CSS). Ici, des extraits d’un exemple de programme qui montrent comment atteindre les objectifs du didacticiel sont fournis. Le fichier zip complet du code source des extraits est également fourni et peut être téléchargé gratuitement.

Qu’est-ce qu’un curseur d’image ?

Curseur d’images est une fonctionnalité animée dans un certain programme qui affiche des images à l’aide d’une animation glissante. Cette fonctionnalité est utilisée pour implémenter un panneau de diaporama ou une fonctionnalité pour un certain site Web ou une application Web.

Comment créer un curseur d’image en utilisant JavaScript et CSS ?

Curseur d’images peut être atteint de plusieurs façons. Il existe également de nombreux plugins ou bibliothèques disponibles que vous pouvez utiliser pour implémenter ladite fonctionnalité dans vos sites Web, tels que le Carrousel d’amorçage. En utilisant JS et CSS combinés, nous pouvons créer un Curseur d’images de zéro. En utilisant CSS, nous pouvons concevoir ladite interface de fonctionnalité et pour ses fonctionnalités, nous pouvons utiliser les écouteurs d’événements et les méthodes intégrées de JavaScript pour implémenter les fonctionnalités de Image Slider.

Code source de l’application de curseur d’image simple

Voici les extraits de la simple démo Image Slider App que j’ai créée pour ce tutoriel qui montre comment obtenir les caractéristiques et fonctionnalités d’un Image Slider en utilisant JS et CSS. Le code source n’utilisait que Cadre d’amorçage pour la conception de certains éléments.

CSS

L’extrait ci-dessous est un CSS fichier contenant le script de la feuille de style pour la conception et l’animation du Curseur d’images. Le fichier est connu sous le nom style.css.

html, body{
    height: 100%;
    width: 100%;
}
body{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
body>nav, body>footer{
    flex-shrink: 1;
}
body>main{
    flex-shrink: 1;
    flex-grow: 1;
    overflow: auto;
    margin: 1em ;
    display: flex;
    align-items: center;
}
.slider-container {
    position: relative;
    overflow: hidden;
}
.slider-images {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.slider-image-holder {
    width: 100%;
    position: relative;
    height: 40vh;
    float: left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .9s ease-in-out;
    margin-right: -100%;
    display: none;
}
.slider-image-holder.active,
.slider-image-holder.item-prev,
.slider-image-holder.item-next {
    display: block;
}
@media (prefers-reduced-motion:reduce) {
    .slider-image-holder {
        transition: none
    }
}
.slider-image-holder.item-prev.active{
    transform: translateX(-100%);
}
.slider-image-holder.item-next.active{
    /* transform: translateX(-100%); */
}
.slider-image-holder.item-next.before-next{
    transform: translateX(100%);
}
.slider-image-holder.item-next.before-next.reverse{
    transform: translateX(-100%);
}
.slider-image-holder.item-prev.active.reverse{
    transform: translateX(100%);
}
.slider-image-holder.no-transition{
    transition: none
}
.slider-image-holder>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.slider-controls {
    position: absolute;
    width: 100%;
    height: 100%;
    top: ;
    left: ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.slider-control-prev, .slider-control-next {
    background: #ffffff61;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5vw;
    height: 5vw;
    font-size: 3em;
    color: #000;
    cursor: pointer;
}

Javascript

Voici le Javascript fichier nommé curseur.js. Le fichier contient le script des fonctionnalités de l’Image Slider.

//current active slide index
if(document.querySelector('.slider-image-holder.active') === null){
    document.querySelector('.slider-image-holder:nth-child(1)').classList.add("active")
}else{
    //Get the active slide item's index
    current_slide_idx = Array.from(document.querySelectorAll('.slider-image-holder')).indexOf(document.querySelector('.slider-image-holder.active'))
}
var curent_slide_el, next_slide_el;
window.slider = function($prev = false){
    var slider_count = document.querySelectorAll('.slider-image-holder').length
    var current_slide_idx = Array.from(document.querySelectorAll('.slider-image-holder')).indexOf(document.querySelector('.slider-image-holder.active'))
    current_slide_idx += 1;
    if($prev === false){
        if(slider_count == current_slide_idx){
            var next_slide_idx = 1;
        }else{
            var next_slide_idx = current_slide_idx +1;
        }
    }else{
        if(current_slide_idx == 1){
            var next_slide_idx = slider_count;
        }else{
            var next_slide_idx = current_slide_idx - 1;
        }
    }
 
    curent_slide_el =  document.querySelector(`.slider-image-holder:nth-child(${current_slide_idx})`)
    next_slide_el =  document.querySelector(`.slider-image-holder:nth-child(${next_slide_idx})`)
        if($prev === true){
            next_slide_el.classList.add('reverse')
            curent_slide_el.classList.add('reverse')
        }
        next_slide_el.classList.add('no-transition')
        next_slide_el.classList.add('before-next')
        next_slide_el.classList.remove('no-transition')
        next_slide_el.classList.add('item-next')
        setTimeout(()=>{
            next_slide_el.classList.remove('before-next')
            curent_slide_el.classList.add('item-prev')
            // curent_slide_el.classList.remove('item-prev')
            // next_slide_el.classList.remove('item-next')
 
            // curent_slide_el.classList.remove('active')
            // next_slide_el.classList.add('active')
            curent_slide_el.addEventListener('transitionend', function(e){

  


                e.preventDefault();
                curent_slide_el.classList.remove('item-prev')
                curent_slide_el.classList.remove('reverse')
                curent_slide_el.classList.remove('active')
                next_slide_el.classList.add('active')
                next_slide_el.classList.remove('item-next')
                if($prev === true){
                    next_slide_el.classList.remove('reverse')
                    curent_slide_el.classList.remove('reverse')
                }
                document.querySelectorAll('.slider-control-prev, .slider-control-next').forEach(el => {
                    this.style.pointerEvents = 'auto';
                });
            })
        }, 100)
 
            return false;
}
document.querySelector('.slider-control-prev').addEventListener('click', function(e){
    e.preventDefault()
    loop_slide_end()
    document.querySelectorAll('.slider-control-prev, .slider-control-next').forEach(el => {
        this.style.pointerEvents = 'auto';
    });
    slider(true)
})
document.querySelector('.slider-control-next').addEventListener('click', function(e){
    e.preventDefault()
    loop_slide_end()
    document.querySelectorAll('.slider-control-prev, .slider-control-next').forEach(el => {
        this.style.pointerEvents = 'auto';
    });
    slider()
})
 
var loop_slide;
window.loop_slide_start = function(){
    loop_slide =setInterval(()=>{ slider() }, 3000)
}
window.loop_slide_end = function(){
    clearInterval(loop_slide)
}
window.onload = function(){
    loop_slide_start()
}

Interface

L’extrait ci-dessous est un HTML fichier nommé index.html. Il contient les scripts des éléments d’interface qui affichent le curseur d’image. La curseur.js et style.css sont chargés sur le script. Veuillez remplacer le chemin de la source de l’image par les images que vous avez téléchargées ou que vous souhaitez utiliser de votre côté.

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src=" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 
<body style="background:#EEF1FF">
    <nav class="navbar navbar-expand-lg navbar-dark" style="background:#7FBCD2">
            <a class="navbar-brand" href="./">Image Slider - JS and CSS</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
 
    <main class="container-fluid">
        <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 mx-auto">
            <div class="card mt-3 rounded-0">
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div class="slider-container">
                            <div class="slider-images">
                                <div class="slider-image-holder">
                                    <img src="./images/image1.jpg" alt="">
                                <div class="slider-image-holder">
                                    <img src="./images/image2.jpg" alt="">
                                <div class="slider-image-holder">
                                    <img src="./images/image3.jpg" alt="">
                            <div class="slider-controls">
                                <div class="slider-control-prev"><i class="fa-solid fa-angle-left"></i></div>
                                <div class="slider-control-next"><i class="fa-solid fa-angle-right"></i></div>
    </main>
<footer class="container-fluid py-3" style="background:#7FBCD2; color:#fff">
    <div class="container-fluid my-2">
        <div class="text-center">
            <b>Image Slider - JS/CSS &copy; 2022</b>
</footer>

Aperçu de l’application

Comment fonctionne l’application Image Slider ?

Cette Application de curseur d’image de démonstration affiche les images à l’infini avec des intervalles de 3 secondes avant d’afficher l’image suivante. La diapositive comporte également des commandes précédentes et suivantes pour naviguer manuellement dans les images. Lorsque les commandes ont été déclenchées, le diaporama s’arrête automatiquement.

Voilà! Vous pouvez maintenant tester le code source de votre côté et voir s’il fonctionne correctement et atteindre l’objectif de ce didacticiel. Le fichier zip complet du code source que j’ai créé peut être téléchargé en cliquant sur le bouton de téléchargement situé après le contenu de cet article.

C’est la fin de ce tutoriel. J’espère Cela Curseur d’image utilisant JavaScript et CSS Tutoriel vous aide à améliorer vos capacités de programmation et vous trouverez cela utile pour vos projets actuels et futurs.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.