Comment créer un slider avec un type de message personnalisé dans WordPress

Lors de la création de sites web, nous avons souvent besoin de solutions qui vont au-delà des fonctions de base de WordPress. Une telle solution est un curseur, qui doit souvent prendre certaines propriétés ou styles. Dans ce tutoriel, je vais vous montrer comment créer votre propre curseur, qui affichera Custom Post.

Le curseur sera créé de deux façons :

La première façon est de créer un curseur qui affichera votre propre type de messages en utilisant le plugin owlCarousel. La tâche du curseur sera d’afficher les messages dans un curseur réactif supportant le système drag&drop
Le deuxième curseur sera un curseur pleine largeur, qui disposera d’un simple script JS avec sa propre navigation. Le curseur stockera ses diapositives dans un type de message personnalisé et contiendra l’image et le titre de l’image.

De plus, pour chaque type de curseur, nous montrerons l’implémentation pour deux constructeurs de pages – WPBakery et Elementor. Les curseurs seront mis en œuvre sur la base de l’ajout de nouveaux widgets aux plugins précédemment créés : REDO JSComposer Additional et REDO Elementor Additional.

Notre propre curseur WordPress – comment créer ?

Qu’est-ce que vous devez savoir

Tout d’abord, vous devez connaître la page du constructeur WPBakery sur laquelle nous basons la construction de notre site web. Dans nos guides précédents, vous trouverez toutes les connaissances nécessaires pour comprendre le processus de création de widgets pour WPBakery.
Lien vers l’article : REDO JSComposer Additional – plugin ajoutant un widget à WPBakery.
Lien vers le plugin WPBakery : https://wpbakery.com/
Si vous ne connaissez pas WPBaker, vous devez connaître la page d’un autre constructeur – Elementor. C’est l’un des plugins les plus connus pour la création de sites web dans le système WordPress. Pour comprendre comment fonctionne notre plugin pour la création de widgets pour Elementor – lire l’article : Elementor – comment créer votre propre plugin de courrier personnalisé
Lien vers le plugin Elementor : https://elementor.com/
Vous devrez lire la documentation de base du plugin OwlCarousel, qui permettra au curseur de fonctionner correctement.
Lien vers le plugin : https://owlcarousel2.github.io/OwlCarousel2/
Nous nous appuyons sur les compétences de base en programmation de PHP, et sur la capacité à créer du code HTML et CSS. Si vous avez lu nos guides précédents, la création d’un curseur ne devrait pas être difficile.
Lien vers la liste des articles précédents : Articles.

Nous créons un curseur drag&drop réactif avec owlCarousel

La première façon est de créer un curseur qui vous permettra d’afficher nos messages personnalisés à l’aide du plugin owlCarousel. Nous allons mettre en place deux widgets – un pour le constructeur de pages de WPBaker, l’autre pour Elementor.

Nous allons commencer par créer notre propre type de poste.

Nous allons créer un poste personnalisé de type Opinion

Dans notre cas, il s’agira d’un courrier personnalisé de type « opinion », qui contiendra :

Le titre – Le nom de l’orateur,
Image distinctive – Vignette de référence,
Excerpt – Titre dans la société de référence,
Contenu – Contenu de l’avis.

Si vous ne savez pas comment créer votre propre type de message personnalisé, veuillez vous référer à l’article :
Créer une vue (template) pour un article personnalisé dans WordPress

Créer un widget pour le plugin WPBaker

Une fois que nous avons créé le type de message personnalisé que nous voulons afficher, nous passons à la création d’un widget. Créez un fichier slider.php dans le dossier de rendu et attachez-le au fichier main.php. Dans le fichier slider.php, nous ajoutons la configuration de base du widget. Si vous ne savez pas comment le faire, lisez l’article : Propre plugin ajoutant un widget au plugin WPBakery plugin.

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
class WPBakeryShortCode_slider extends WPBakeryShortCode
{
 
    protected function content( $atts, $content = null ) {

        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );

        $some_id = rand(5, 500);


        $opinie = get_posts(array(
                "post_type" => 'opinia',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));

        ob_start(); ?>
 
                <!-- HTML DESIGN HERE -->
                
            <div class="opinia-container">
                <h2 class="opinia-container-tytul">Opinie</h2>
                <?php foreach($opinie as $op) : ?>
									<div class="item">
                                            <div class="opinia-header">
                                                <div class="opinia-image-container">
                                                    <img src="<?php echo get_the_post_thumbnail_url($op->ID) ?>"/>
                                                </div>
                                                <div class="opinia-nazwa-container">
                                                <h4><?php echo get_the_title($op->ID); ?></h4>
                                                <p><?php echo get_the_excerpt($op->ID); ?></p>
                                                </div>
                                            </div>
                                            <div class="opinia-content-container">
                                                <?php echo $op->post_content; ?>
                                            </div>
									</div>
								<?php endforeach ?>
            </div>
                <!-- HTML END DESIGN HERE -->
            <?php
            return ob_get_clean();
    }
}
 
 
vc_map( array(
    "name" 			=> __( 'Slider', 'redo_slider' ),
    "base" 			=> "slider",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display references slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(

    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_slider extends WPBakeryShortCode

{

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$some_id = rand(5, 500);

$opinie = get_posts(array(

"post_type" => 'opinia',

'numberposts' => -1,

'order' => 'ASC'

));

ob_start(); ?>

<h2 class="opinia-container-tytul">Opinie</h2>

<?php foreach($opinie as $op) : ?>

</div>

</div>

<?php echo $op->post_content; ?>

</div>

<?php endforeach ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Slider', 'redo_slider' ),

"base" => "slider",

"category" => __('REDO Addons'),

"description" => __('Display references slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

Nous obtenons ainsi un widget fonctionnel qui affiche tous les messages d’opinion. Nous avons ajouté deux avis de test et les avons affichés à l’aide de notre widget.

Les plug-ins REDO Additional pour WPBakery et Elementor peuvent être téléchargés ici – REDO Additional (1040 téléchargements )

Créer un widget pour le plugin Elementor

Si nous utilisons Elementor, nous devons créer un widget en utilisant notre plugin REDO Elementor Additional – si vous ne savez pas comment fonctionne notre plugin, je vous renvoie à l’article : Elementor – comment créer votre propre plugin de courrier personnalisé.
Créez un fichier slider.php dans le dossier de rendu et attachez-le dans le fichier main.php. Dans le fichier slider.php, nous ajoutons la configuration de base du widget.

<?php
namespace REDO\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit;

class Slider extends Widget_Base {

   public function get_name() {
      return 'slider';
   }

   public function get_title() {
      return __( 'Slider' );
   }

   public function get_icon() {
      return 'fa fa-eye';
   }

   public function get_categories(){
      return ['general'];
   }
   protected function _register_controls() {
      $this->start_controls_section(
         'section_content',
         [
           'label' => 'Settings',
         ]
       );
       $this->add_control(
         'slider',
         [
           'label' => 'Slider',
           'type' => \Elementor\Controls_Manager::HEADING,
           'default' => 'Display references'
         ]
       );

   
       $this->end_controls_section();
     }
     
   
     protected function render(){
      
      $args = array(
         'post_type' => 'opinia',
         'posts_per_page' => -1,
         'orderby' => 'date'
     );
     $query = new \WP_Query($args);
     $opinie = ($query->posts);
?>

         <!-- HTML DESIGN HERE -->
         <div class="opinia-container">
                <h2 class="opinia-container-tytul">Opinie</h2>
                <?php foreach($opinie as $op) : ?>
									<div class="item">
                                            <div class="opinia-header">
                                                <div class="opinia-image-container">
                                                    <img src="<?php echo get_the_post_thumbnail_url($op->ID) ?>"/>
                                                </div>
                                                <div class="opinia-nazwa-container">
                                                <h4><?php echo get_the_title($op->ID); ?></h4>
                                                <p><?php echo get_the_excerpt($op->ID); ?></p>
                                                </div>
                                            </div>
                                            <div class="opinia-content-container">
                                                <?php echo $op->post_content; ?>
                                            </div>
									</div>
								<?php endforeach ?>
            </div>
         <!-- HTML END DESIGN HERE -->
       <?php
     }
   
   }

<?php

namespace REDO\Widgets;

use Elementor\Widget_Base;

use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit;

class Slider extends Widget_Base {

public function get_name() {

return 'slider';

}

public function get_title() {

return __( 'Slider' );

}

public function get_icon() {

return 'fa fa-eye';

}

public function get_categories(){

return ['general'];

}

protected function _register_controls() {

$this->start_controls_section(

'section_content',

[

'label' => 'Settings',

]

);

$this->add_control(

'slider',

[

'label' => 'Slider',

'type' => \Elementor\Controls_Manager::HEADING,

'default' => 'Display references'

]

);

$this->end_controls_section();

}

protected function render(){

$args = array(

'post_type' => 'opinia',

'posts_per_page' => -1,

'orderby' => 'date'

);

$query = new \WP_Query($args);

$opinie = ($query->posts);

<h2 class="opinia-container-tytul">Opinie</h2>

<?php foreach($opinie as $op) : ?>

</div>

</div>

<?php echo $op->post_content; ?>

</div>

<?php endforeach ?>

</div>

<?php

}

Nous obtenons un élément de widget – curseur qui fonctionne correctement.

Les plug-ins REDO Additional pour WPBakery et Elementor peuvent être téléchargés ici – REDO Additional (1040 téléchargements )

Nous faisons un curseur avec un owlCarousel

Nous attachons le plugin au projet

La partie concernant la création d’un widget nous est déjà bien connue grâce à des articles précédents et ne nous a pas posé de problème. Nous allons maintenant passer à l’application owlCarousel plugin. Il y a deux façons d’utiliser le plugin – vous pouvez le faire. La première façon est de joindre les fichiers du plugin à partir d’une source CDN externe ou de placer physiquement les fichiers sur le serveur. Dans ce cas, nous utiliserons la possibilité de joindre des fichiers via les liens CDN.

Les liens doivent être correctement attachés au fichier principal CSS et au fichier principal JS.

CSS :

<link href= »https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css » rel= »stylesheet »>
<link href= »https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css » rel= »stylesheet »>

JS :

<script src= »https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js »></script>

Configuration de base du curseur

Maintenant, nous devons retourner au code de notre widget slider.php et nous devons fermer nos opinions dans un conteneur qui fonctionnera comme owlCarousel. Pour ce faire, nous devons ajouter foreach pour ajouter div, que nous appellerons . owl-carousel et nous ajouterons .owl-theme pour utiliser les propriétés de base du plugin owlCarousel.

Notre code ressemblera à ceci :

<!-- HTML DESIGN HERE -->
                
            <div class="opinia-container">
                <h2 class="opinia-container-tytul">Opinie</h2>
                <div class="owl-carousel owl-theme">
                <?php foreach($opinie as $op) : ?>
									<div class="item">
                                            <div class="opinia-header">
                                                <div class="opinia-image-container">
                                                    <img src="<?php echo get_the_post_thumbnail_url($op->ID) ?>"/>
                                                </div>
                                                <div class="opinia-nazwa-container">
                                                <h4><?php echo get_the_title($op->ID); ?></h4>
                                                <p><?php echo get_the_excerpt($op->ID); ?></p>
                                                </div>
                                            </div>
                                            <div class="opinia-content-container">
                                                <?php echo $op->post_content; ?>
                                            </div>
									</div>
								<?php endforeach ?>
                </div>
            </div>
                <!-- HTML END DESIGN HERE -->

<h2 class="opinia-container-tytul">Opinie</h2>

<?php foreach($opinie as $op) : ?>

</div>

</div>

<?php echo $op->post_content; ?>

</div>

<?php endforeach ?>

</div>

Nous passons maintenant à l’initiation owlCarousel(). Dans le fichier js principal, nous ajoutons la configuration de base du plugin :

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

$('.owl-carousel').owlCarousel({

loop:true,

margin:10,

nav:true,

items: 1

})

En plein dans le mille ! Nous avons créé un curseur avec owlCarousel.

Notre code javascript a correctement initialisé le owlCarousel() pour un div .owl-carousel. Il a des propriétés de base glissante. Si nous voulons régler notre curseur de manière plus détaillée, rien ne s’y oppose. Veuillez lire la documentation du plugin et régler les valeurs appropriées.

Un simple curseur WordPress avec sa propre navigation

Nous passons à la création d’un curseur qui aura une animation de base lors du changement de diapositives et de la navigation. Ce type de curseur est généralement utilisé comme première section de la page d’accueil – nous pouvons trouver son utilisation dans notre projet Pierson-Export.

Nous créons un message personnalisé de type « slider »

.
Nous stockerons nos diapositives dans un post type personnalisé : « slider ». Nous voulons que la diapositive contienne l’image de l’écran et le titre de la diapositive. Nous aurons donc besoin de deux champs :

Featured image,
Title.

Si vous ne savez pas comment créer un type de message personnalisé, je vous renvoie à l’article : Créer une vue (template) pour un article personnalisé dans WordPress.

Widget contenant un curseur – WPBakery, Elementor

Si nous avons déjà créé un type de message personnalisé, vous devez créer, comme pour le premier type de curseur, des fichiers pour nos plugins – en fonction du créateur de page que vous utilisez, nous utilisons le plugin approprié :

WPBakery – REDO JSComposer Additional
Elementor – REDO Elementor Additional

Vous trouverez le processus de création du widget dans ces articles :

Nous passons à la création d’un widget. Dans ce cas, je vais le faire pour le constructeur de pages de WPBaker. La configuration du curseur pour Elementor sera très similaire à celle du curseur utilisant le owlCarousel, vous pouvez donc vérifier comment le faire en cliquant sur t ici.

Créez un fichier customslider.php dans le dossier render et assignez-le dans main.php. Puis ajoutez la configuration de base du widget dans le fichier customslider.php.

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

    protected function content( $atts, $content = null ) {

        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );

        $slider = get_posts(array(
                "post_type" => 'slider',
                'orderby'          => 'date',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));
        ob_start(); ?>
        <!-- HTML DESIGN HERE -->
            <div class="slider-container">
            </div>
        <!-- HTML END DESIGN HERE -->
        <?php
        return ob_get_clean();
    }
}
vc_map( array(
    "name" 			=> __( 'Custom Slider', 'redo_customslider' ),
    "base" 			=> "customslider",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display custom slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(

    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$slider = get_posts(array(

"post_type" => 'slider',

'orderby' => 'date',

'numberposts' => -1,

'order' => 'ASC'

));

ob_start(); ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Custom Slider', 'redo_customslider' ),

"base" => "customslider",

"category" => __('REDO Addons'),

"description" => __('Display custom slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

La structure de votre propre curseur WordPress

Nous pouvons maintenant passer à la création d’une structure de curseur. Dans la div’ie – .slider-container créée précédemment, nous créons une navigation de notre curseur, qui sera affichée dans la div’ie – .slider-change. Avant d’afficher la navigation, vérifiez si notre curseur contient suffisamment de curseurs pour créer une navigation. Le curseur doit avoir plus de diapositives que 1, nous ajoutons donc une condition :

<?php if(count($slider) !=0 &&amp ; count($slider) != 1) : "" >

1	<?php if(count($slider) !=0 &&amp ; count($slider) != 1) : "" >

Ensuite, dans la diva .slider-change – nous itérons en utilisant la foreach, en affichant une navigation qui contiendra des liens vers nos diapositives. Chaque lien doit contenir l’identifiant correspondant à la diapositive correspondante. Nous devons donc créer un $i=0 – ce sera chargé de donner l’identifiant de navigation correspondant. Nous l’agrandirons chaque fois que nous ajouterons un numéro d’article de navigation. En outre, l’ID sera affiché comme un élément de navigation – augmenté de 1. code de navigation :

<?php if(count($slider) !=0 && count($slider) != 1) : ?>
                    <div class="slider-change">
                            <?php foreach($slider as $slide) : ?>
                                <?php if($i==0) : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>
                                <?php else  : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>
                                <?php endif; ?>
                            <?php endforeach ?>
                    </div>
            <?php endif; ?>

<?php if(count($slider) !=0 && count($slider) != 1) : ?>

<?php foreach($slider as $slide) : ?>

<?php if($i==0) : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>

<?php else : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>

<?php endif; ?>

<?php endforeach ?>

</div>

<?php endif; ?>

Nous passons maintenant à l’affichage des diapositives. Créer un foreach, en affichant le $slider. Plus tôt, vous devriez créer un $x = 0, qui vérifiera que le premier élément du tableau obtient une classe slide-active – .slide-active. Cette classe rendra la diapositive visible, tandis que les diapositives sans cette classe ne seront pas visibles à l’écran. Les images seront affichées sous forme de diapositive de fond. Le titre de la diapositive sera inclus dans l’en-tête h2 avec .slider-header. Code de l’en-tête du curseur :

<?php foreach($slider as $slide) : ?>
                        <?php if($x==0) : ?>
                        <div class="slider slide-active " style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>
                            </div>
                        </div>
                        <?php else : ?>
                        <div class="slider" style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; ?></h2>
                            </div>
                        </div>
                        <?php endif; ?>
                    <?php endforeach ?>

<?php foreach($slider as $slide) : ?>

<?php if($x==0) : ?>

<h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>

</div>

<?php else : ?>

<h2 class="slider-header"><?php echo $slide->post_title; ?></h2>

</div>

<?php endif; ?>

<?php endforeach ?>

L’ensemble du code PHP, y compris les compteurs :

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

    protected function content( $atts, $content = null ) {

        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );

        $slider = get_posts(array(
                "post_type" => 'slider',
                'orderby'          => 'date',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));
            $i = 0;
            $x = 0;
        ob_start(); ?>
       
        <!-- HTML DESIGN HERE -->
            <div class="slider-container">
            <?php if(count($slider) !=0 && count($slider) != 1) : ?>
                    <div class="slider-change">
                            <?php foreach($slider as $slide) : ?>
                                <?php if($i==0) : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>
                                <?php else  : ?>
                                    <a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>
                                <?php endif; ?>
                            <?php endforeach ?>
                    </div>
            <?php endif; ?>
                    <?php foreach($slider as $slide) : ?>
                        <?php if($x==0) : ?>
                        <div class="slider slide-active " style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>
                            </div>
                        </div>
                        <?php else : ?>
                        <div class="slider" style="background: url(<?php echo get_the_post_thumbnail_url($slide->ID, 'full'); ?>);">
                            <div class="slider-content">
                                <h2 class="slider-header"><?php echo $slide->post_title; ?></h2>
                            </div>
                        </div>
                        <?php endif; ?>
                    <?php endforeach ?>
                    
            </div>
        <!-- HTML END DESIGN HERE -->
        <?php
        return ob_get_clean();
    }
}


vc_map( array(
    "name" 			=> __( 'Custom Slider', 'redo_customslider' ),
    "base" 			=> "customslider",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display custom slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(

    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_customslider extends WPBakeryShortCode {

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$slider = get_posts(array(

"post_type" => 'slider',

'orderby' => 'date',

'numberposts' => -1,

'order' => 'ASC'

));

$i = 0;

$x = 0;

ob_start(); ?>

<?php if(count($slider) !=0 && count($slider) != 1) : ?>

<?php foreach($slider as $slide) : ?>

<?php if($i==0) : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num slider-active"><?php echo $i; ?></a>

<?php else : ?>

<a id="<?php echo $i; $i++;?>" class="slider-num"><?php echo $i; ?></a>

<?php endif; ?>

<?php endforeach ?>

</div>

<?php endif; ?>

<?php foreach($slider as $slide) : ?>

<?php if($x==0) : ?>

<h2 class="slider-header"><?php echo $slide->post_title; $x++; ?></h2>

</div>

<?php else : ?>

<h2 class="slider-header"><?php echo $slide->post_title; ?></h2>

</div>

<?php endif; ?>

<?php endforeach ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Custom Slider', 'redo_customslider' ),

"base" => "customslider",

"category" => __('REDO Addons'),

"description" => __('Display custom slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

Javascript supportant la navigation par curseur

Nous sommes en train de créer un script de curseur qui gérera la navigation entre les diapositives. Au préalable, vous devez créer quelques exemples de diapositives avec des titres et des images – dans notre cas, il s’agira de trois diapositives.

Pour créer le script, nous utiliserons du javascript pur, car ce sont des instructions très simples qui ne nécessitent pas de jQuery.

Nous créons deux tableaux :

Slider’s Hygiene Links – myBtns[]
Tableau de diapositives – sliders[]

Avec querySelectorAll nous téléchargeons nos éléments :

let myBtns = document.querySelectorAll('.slider-num');
let sliders = document.querySelectorAll('.slider');

1 2	let myBtns = document.querySelectorAll('.slider-num'); let sliders = document.querySelectorAll('.slider');

Maintenant, dans une boucle pour chaque élément myBtns[] nous ajoutons EventListener « click », en vérifiant si nous avons cliqué sur un lien vers une diapositive. Si vous avez cliqué, vérifiez avec getElementsByClassName le lien de navigation actif et la diapositive active.

 for (var i = 0; i < myBtns.length; i++) {
      myBtns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("slider-active");
        var currentSlide = document.getElementsByClassName("slide-active");
      });
    }

for (var i = 0; i < myBtns.length; i++) {

myBtns[i].addEventListener("click", function() {

var current = document.getElementsByClassName("slider-active");

var currentSlide = document.getElementsByClassName("slide-active");

});

}

Supprimez maintenant les classes actives et assignez-les au lien approprié dans la navigation et à la diapositive appropriée. De cette façon, on obtient le script complet de JS :

<script>

    let myBtns = document.querySelectorAll('.slider-num');
    let sliders = document.querySelectorAll('.slider');
    for (var i = 0; i < myBtns.length; i++) {
      myBtns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("slider-active");
        var currentSlide = document.getElementsByClassName("slide-active");
        current[0].className = current[0].className.replace("slider-active", "");
        currentSlide[0].className = currentSlide[0].className.replace("slide-active", "");
        this.className += " slider-active";
        sliders[this.id].className += " slide-active";
      });
    }

</script>

let myBtns = document.querySelectorAll('.slider-num');

let sliders = document.querySelectorAll('.slider');

for (var i = 0; i < myBtns.length; i++) {

myBtns[i].addEventListener("click", function() {

var current = document.getElementsByClassName("slider-active");

var currentSlide = document.getElementsByClassName("slide-active");

current[0].className = current[0].className.replace("slider-active", "");

currentSlide[0].className = currentSlide[0].className.replace("slide-active", "");

this.className += " slider-active";

sliders[this.id].className += " slide-active";

});

}

</script>

Code CSS de notre curseur

Tout est prêt. Notre curseur fonctionne avec l’aide à la navigation. Il faut maintenant passer à la mise en forme et à la valorisation de nos cours.

La première étape consiste à donner un style à notre conteneur – il doit avoir position : relative pour stocker correctement nos diapositives, qui auront position : absoltue et seront affichées en pleine largeur. Pour la diapositive, vous devez régler le paramètre background:cover de manière à couvrir toute la surface de la diva. La valeur par défaut . slider aura visibility : hidden, seulement après avoir reçu le . slide-active avec animation fadeIn visibility changera à visible.

Vous pouvez donner à votre navigation le style que vous souhaitez, tout comme vous pouvez modifier l’affichage du code PHP. Nous ajoutons ci-dessous notre style de curseur CSS, qui comprend également une animation de diapositives.

/* Slider */
.slider-container {
    position: relative;
    margin-top: -30px;
    top: 0 !important;
    height: 900px;
    display: flex;
    overflow-y: hidden;
    background-color: #000;
}
.slider {
    position: absolute;
    visibility: hidden;
    height: 900px;
    width: 100%;
    background-position: center !important;
    background-repeat: no-repeat !important; 
    background-size: cover !important;
    display: flex;
    align-items: center;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.slide-active {
    animation: 2s fadeIn;
    animation-fill-mode: forwards;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.slider-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 255px;
    max-width: 950px;
    margin-top: 180px;
}
.slider-header {
    margin: 0px;
    color: #fff;
}
.slider-change {
    height: 180px;
    width: 60px;
    position: absolute;
    right: 255px !important;
    top: 400px;
    display: flex;
    flex-direction: column;
    text-align: right;
}
.slider-num {
    position: absolute;
    color: #ffffff;
    margin: 0 0 33px 0;
    cursor: pointer;
    display: block !important;
    z-index: 3;
    margin-left:30px;
    font-family: Lato;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: right;
  color: rgba(255, 255, 255, 0.3);
}
.slider-num:nth-child(2){
    margin-top: 60px;
}
.slider-num:nth-child(3){
    margin-top: 120px;
}
.slider-num:after {
    content: '';
    position: absolute;
    width: 20px;
  height: 20px;
  opacity: 0.3;
  background-color: #ffffff;
  margin-left: 12px;
  margin-top: 5px;
}
.slider-active:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    margin-left: 17px;
    opacity: 1;
     margin-top: 15px;
}
.slider-active {
    font-family: Lato;
  font-size: 38px;
  font-weight: bold;
  color: #ffffff !important;
  margin-left: 15px;
}
.slider-active a {
    color: #ffffff !important;
}
/* End Slider */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

/* Slider */

.slider-container {

position: relative;

margin-top: -30px;

top: 0 !important;

height: 900px;

display: flex;

overflow-y: hidden;

background-color: #000;

}

.slider {

position: absolute;

visibility: hidden;

height: 900px;

width: 100%;

background-position: center !important;

background-repeat: no-repeat !important;

background-size: cover !important;

display: flex;

align-items: center;

}

@keyframes fadeIn {

0% {

opacity: 0;

}

100% {

visibility: visible;

opacity: 1;

}

.slide-active {

animation: 2s fadeIn;

animation-fill-mode: forwards;

}

@-webkit-keyframes slide-in-top {

0% {

-webkit-transform: translateY(-1000px);

transform: translateY(-1000px);

opacity: 0;

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

opacity: 1;

}

@keyframes slide-in-top {

0% {

-webkit-transform: translateY(-1000px);

transform: translateY(-1000px);

opacity: 0;

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

opacity: 1;

}

.slider-content {

display: flex;

flex-direction: column;

justify-content: center;

margin-left: 255px;

max-width: 950px;

margin-top: 180px;

}

.slider-header {

margin: 0px;

color: #fff;

}

.slider-change {

height: 180px;

width: 60px;

position: absolute;

right: 255px !important;

top: 400px;

display: flex;

flex-direction: column;

text-align: right;

}

.slider-num {

position: absolute;

color: #ffffff;

margin: 0 0 33px 0;

cursor: pointer;

display: block !important;

z-index: 3;

margin-left:30px;

font-family: Lato;

font-size: 24px;

font-weight: bold;

font-stretch: normal;

font-style: normal;

line-height: normal;

letter-spacing: normal;

text-align: right;

color: rgba(255, 255, 255, 0.3);

}

.slider-num:nth-child(2){

margin-top: 60px;

}

.slider-num:nth-child(3){

margin-top: 120px;

}

.slider-num:after {

content: '';

position: absolute;

width: 20px;

height: 20px;

opacity: 0.3;

background-color: #ffffff;

margin-left: 12px;

margin-top: 5px;

}

.slider-active:after {

content: '';

position: absolute;

width: 20px;

height: 20px;

background-color: #ffffff;

margin-left: 17px;

opacity: 1;

margin-top: 15px;

}

.slider-active {

font-family: Lato;

font-size: 38px;

font-weight: bold;

color: #ffffff !important;

margin-left: 15px;

}

.slider-active a {

color: #ffffff !important;

}

/* End Slider */

Nous avons un curseur WordPress qui fonctionne

Nous avons ainsi obtenu un curseur avec un code JS et CSS simple, qui peut être modifié librement en termes de structure et d’apparence.

&nbsp ;

1 2 3

Slide 1

Slide 2

Slider 3

Summing

Dans cet article, nous avons présenté comment créer un curseur dans WordPress affichant le type de message personnalisé de deux façons. Nous avons appris la configuration de base du plugin owlCarousel, qui est un outil très polyvalent pour créer différents types de curseurs. Le plugin est léger, réactif et ce qui est important, c’est qu’il n’alourdit pas notre site web. La deuxième méthode consiste à créer un curseur simple avec une navigation de base, un script JS propre et un code CSS simple.

Ces deux méthodes nécessitent quelques améliorations, mais en les utilisant, nous pouvons personnaliser entièrement le curseur selon nos besoins. En utilisant des solutions toutes faites, nous devons souvent faire certaines concessions et ne pouvons pas appliquer certaines propriétés.

Si vous souhaitez en savoir plus sur la création de widgets pour Elementor ou WPBakery et plus encore, veuillez lire nos autres articles – https://redo-interactive.com/fr/articles-utiles/