WordPress : Comment faire fonctionner le curseur javascript !
Je viens juste de commencer à développer mes propres thèmes et je suis bloqué en ajoutant du javascript à mon slider.
J’ai ajouté le curseur dans mon fichier index.php comme ci-dessous :
<div class="carousel">
<div class="carousel__content">
<div class="item">
<p class="title">First</p>
<img src="http://placehold.it/1800x850/70AD96/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Second</p>
<img src="http://placehold.it/1800x850/EA4E23/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Third</p>
<img src="http://placehold.it/1800x850/9BA452/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fourth</p>
<img src="http://placehold.it/1800x850/472D38/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Fifth</p>
<img src="http://placehold.it/1800x850/F77C85/FFF&text= " alt="">
</div>
<div class="item">
<p class="title">Sixth</p>
<p class="title title--sub">Last Item</p>
<img src="http://placehold.it/1800x850/00FFAE/FFF&text= " alt="">
</div>
</div>
<div class="carousel__nav">
<a href="#" class="nav nav--left">Previous</a>
<a href="#" class="nav nav--right">Next</a>
</div>
Et puis créé un fichier js/slider-js.js avec ce qui suit :
( function () {
var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;
carouselContent = $('.carousel__content');
carouselIndex = 0;
carouselLength = carouselContent.children().length;
isAnimating = false;
itemWidth = 100 / carouselLength;
firstItem = $(carouselContent.children()[0]);
lastItem = $(carouselContent.children()[carouselLength - 1]);
firstClone = null;
lastClone = null;
carouselContent.css('width', carouselLength * 100 + '%');
carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
$.each(carouselContent.children(), function () {
return $(this).css('width', itemWidth + '%');
});
$('.nav--left').on('click', function () {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex--;
if (carouselIndex === -1) {
lastItem.prependTo(carouselContent);
carouselContent.transition({ x: (carouselIndex + 2) * -itemWidth + '%' }, 0);
return carouselContent.transition({ x: (carouselIndex + 1) * -itemWidth + '%' }, 1000, 'easeInOutExpo', function () {
carouselIndex = carouselLength - 1;
lastItem.appendTo(carouselContent);
carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
return isAnimating = false;
});
} else {
return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 1000, 'easeInOutExpo', function () {
return isAnimating = false;
});
}
});
$('.nav--right').on('click', function () {
if (isAnimating) {
return;
}
isAnimating = true;
carouselIndex++;
return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 1000, 'easeInOutExpo', function () {
isAnimating = false;
if (firstClone) {
carouselIndex = 0;
carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
firstClone.remove();
firstClone = null;
carouselLength = carouselContent.children().length;
itemWidth = 100 / carouselLength;
carouselContent.css('width', carouselLength * 100 + '%');
$.each(carouselContent.children(), function () {
return $(this).css('width', itemWidth + '%');
});
return;
}
if (carouselIndex === carouselLength - 1) {
carouselLength++;
itemWidth = 100 / carouselLength;
firstClone = firstItem.clone();
firstClone.addClass('clone');
firstClone.appendTo(carouselContent);
carouselContent.css('width', carouselLength * 100 + '%');
$.each(carouselContent.children(), function () {
return $(this).css('width', itemWidth + '%');
});
return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
}
});
});
}.call(ceci));
puis lié à mon functions.php avec ce qui suit :
function skinsave_2016_slider() {
wp_enqueue_script('skinsave_2016-slider-js', content_url('/js/slider-js.js'), array(), null, true);
}
add_action('wp_head', 'skinsave_2016_slider');
J’ai également ajouté ce qui suit entre les balises de mon fichier header.php :
<script type="text/javascript" src="<?php bloginfo('skinsave_2016'); ?>/js/slider-js.js"></script>
Et le CSS :
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
font-family: "europa-1","europa-2", sans-serif;
overflow: scroll;
}
.wrapper {
max-width: 940px;
width: 100%;
position: relative;
overflow: scroll;
margin: 0 auto;
}
/**
* Use this wrapper only for demo purposes
* So you can show the items outside the wrapper
*/
}
.wrapper--demo:before {
left: -800px;
}
.carousel {
width: 100%;
position: relative;
}
.carousel .carousel__content {
width: auto;
position: relative;
overflow: scroll;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0, 0, 0);
}
.carousel .carousel__content .item {
display: block;
float: left;
width: 100%;
position: relative;
}
.carousel .carousel__content .item .title {
position: absolute;
top: 50%;
left: 0;
margin: -33px 0 0 0;
padding: 0;
font-size: 3rem;
width: 100%;
text-align: center;
letter-spacing: .3rem;
color: #FFF;
}
.carousel .carousel__content .item .title--sub {
margin-top: 20px;
font-size: 1.2em;
opacity: .5;
}
.carousel .carousel__content .item img {
width: 100%;
max-width: 100%;
display: block;
}
.carousel .carousel__nav {
position: absolute;
width: 100%;
top: 50%;
margin-top: -17px;
left: 0;
z-index: 1;
}
.carousel .carousel__nav .nav {
position: absolute;
top: 0;
color: #000;
background: #FFF;
padding: 8px 12px;
font-weight: bold;
text-decoration: none;
font-size: .8rem;
transition: padding .25s ease;
}
.carousel .carousel__nav .nav:hover {
padding: 8px 20px;
}
.carousel .carousel__nav .nav--left {
border-radius: 0px 3px 3px 0px;
}
.carousel .carousel__nav .nav--right {
right: 0;
border-radius: 3px 0px 0px 3px;
}
Le curseur se charge correctement mais ne s’affiche pas comme un curseur, mais plutôt comme une liste de blocs. J’ai l’impression que c’est l’implémentation du javascript qui pose problème. Quelqu’un peut-il aider?
Solution n°1 trouvée
Vous devez changer la partie mise en file d’attente en ceci :
function skinsave_2016_slider() {
wp_enqueue_script( 'skinsave_2016-slider-js', get_bloginfo( 'template_url' ) . '/js/slider-js.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'skinsave_2016_slider');
Le problème était que votre fonction content_url()renvoie http://yourdomain.com/wp-content, et non l’URL du modèle. get_bloginfo( 'template_url' )revient http://yourdomain.com/wp-content/themes/yourthemeslug.
La deuxième version que vous avez essayée vous a écrit bloginfo('skinsave_2016');, où ‘skinsave_2016’ n’est pas un argument valide.
Restez avec la première version cependant, car c’est la bonne façon.
Assurez-vous également que votre thème appelle wp_head()et wp_footer()!
0 commentaire