Salut à tous, je fais un site sur le ski sur wordpress. Je souhaite faire slider grâce a redux framework sur la page d’accueil.
Problème : je ne comprends pas comment l’afficher. J’ai essayé d’utiliser un fichier js mais je comprends pas comment le relier. Je mets le codes en dessous, pouvez vous m’aider svp je suis perdu.
slider.js
// external js: flickity.pkgd.js
jQuery(document).ready(function ($) {
var $carousel = $('.carousel').flickity({
imagesLoaded: true,
percentPosition: false,
pageDots: false
});
var $imgs = $carousel.find('.carousel-cell img');
// get transform property
var docStyle = document.documentElement.style;
var transformProp = typeof docStyle.transform == 'string' ?
'transform' : 'WebkitTransform';
// get Flickity instance
var flkty = $carousel.data('flickity');
$carousel.on( 'scroll.flickity', function() {
flkty.slides.forEach( function( slide, i ) {
var img = $imgs[i];
var x = ( slide.target + flkty.x ) * -1/3;
img.style[ transformProp ] = 'translateX(' + x + 'px)';
});
});
});
front-page.php
<?php
/**
* The main template file
*/
?>
<?php get_header(); ?>
<div class="contenu container">
<div class="row">
<div class="col-12">
<?php if ( have_posts() ) : ?>
<div class="row">
<?php while (have_posts()) : the_post(); ?>
<div class="col-12">
<?php
get_template_part( 'template-parts/content', 'slider' );
?>
</div>
<?php endwhile; ?>
</div>
<?php else : ?>
<?php
get_template_part( 'template-parts/content', 'none' );
?>
<?php endif; ?>
</div>
<div class="col-12">
</div>
</div>
</div>
<?php get_footer();?>
scripts.php
<?php
if (! function_exists ( 'starter_scripts' )) :
function starter_scripts() {
wp_enqueue_script ( 'popper-script', get_stylesheet_directory_uri () . '/bootstrap/popper.min.js', array (
'jquery'
) );
wp_enqueue_script ( 'bootstrap-script', get_template_directory_uri () . '/bootstrap/js/bootstrap.min.js', array (
'jquery'
) );
wp_enqueue_script ( 'slider-script', get_template_directory_uri () . '/js/slider.js', array (
'jquery'
) );
wp_enqueue_style ( 'bootstrap-style', get_template_directory_uri () . '/bootstrap/css/bootstrap.css' );
wp_enqueue_style ( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' );
wp_enqueue_style ( 'starter-style', get_template_directory_uri () . '/css/dm.css' );
wp_enqueue_style ( 'options-style', get_template_directory_uri () . '/css/redux_starter.css' );
wp_enqueue_style ( 'style', get_template_directory_uri () . '/style.css' );
}
endif;
add_action ( 'wp_enqueue_scripts', 'starter_scripts' );
function dm_scripts() {
}
add_action ( 'wp_enqueue_scripts', 'dm_scripts' );
content-slider.php
<div class="card mb-2">
<div class="card-body text-center">
<?php the_content( ); ?>
</div>
</div>
<script src="./js/slider.js"></script>
+0
-0
