integrating swiper
This commit is contained in:
parent
35276cb5f2
commit
247acde2c4
87
css/app.css
87
css/app.css
|
|
@ -1416,6 +1416,8 @@ button:focus {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
|
|
@ -2045,7 +2047,7 @@ article > *:not(.entry-content),
|
|||
|
||||
.menu-renovateur-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -2355,10 +2357,83 @@ article > *:not(.entry-content),
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: green;
|
||||
.swiper-content {
|
||||
position: relative;
|
||||
max-width: 1440px;
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
/* @apply bg-yellow-50; */
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
width: 100%;
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.thematique-button-next,
|
||||
.thematique-button-prev {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 50;
|
||||
opacity: 0.8;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.thematique-button-next:hover,
|
||||
.thematique-button-next:focus,
|
||||
.thematique-button-prev:hover,
|
||||
.thematique-button-prev:focus {
|
||||
opacity: 1;
|
||||
filter: invert(13%) sepia(71%) saturate(4425%)
|
||||
hue-rotate(338deg) brightness(109%) contrast(117%);
|
||||
}
|
||||
|
||||
.thematique-button-next:focus, .thematique-button-prev:focus {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.thematique-button-next {
|
||||
right: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.thematique-button-prev {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet:focus {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
--tw-border-opacity: 1 !important;
|
||||
border-color: rgb(223 30 30 / var(--tw-border-opacity)) !important;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(223 30 30 / var(--tw-bg-opacity));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* .swiper-slide {
|
||||
|
|
@ -2379,6 +2454,8 @@ article > *:not(.entry-content),
|
|||
} */
|
||||
|
||||
.section-show-thematiques {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,13 +53,13 @@ function tailpress_enqueue_scripts()
|
|||
{
|
||||
$theme = wp_get_theme();
|
||||
|
||||
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
|
||||
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
|
||||
wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array(), $theme->get('Version'));
|
||||
// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
|
||||
wp_enqueue_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));
|
||||
|
||||
// wp_enqueue_script('swiperjs', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js', array('tailpress'), $theme->get('Version'), true);
|
||||
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
|
||||
// wp_register_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
|
||||
}
|
||||
add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts');
|
||||
|
|
@ -126,4 +126,4 @@ function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
|
|||
return $classes;
|
||||
}
|
||||
|
||||
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
|
||||
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
.menu-renovateur-footer {
|
||||
@apply flex justify-center gap-8;
|
||||
@apply flex justify-between gap-8;
|
||||
|
||||
li {
|
||||
.page_icon {
|
||||
|
|
|
|||
7
resources/img/graphic-assets/slider-next-left.svg
Normal file
7
resources/img/graphic-assets/slider-next-left.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg id="bouton-slider-gauche" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
|
||||
<g id="Ellipse_208" data-name="Ellipse 208" fill="none" stroke="#000" stroke-width="2">
|
||||
<circle cx="30" cy="30" r="30" stroke="none"/>
|
||||
<circle cx="30" cy="30" r="29" fill="none"/>
|
||||
</g>
|
||||
<path id="Tracé_3191" data-name="Tracé 3191" d="M0,17.266,10.682,8.633,0,0" transform="translate(35.277 38.697) rotate(180)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 535 B |
7
resources/img/graphic-assets/slider-next-right.svg
Normal file
7
resources/img/graphic-assets/slider-next-right.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg id="bouton-slider-droite" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
|
||||
<g id="Ellipse_209" data-name="Ellipse 209" transform="translate(60 60) rotate(180)" fill="none" stroke="#000" stroke-width="2">
|
||||
<circle cx="30" cy="30" r="30" stroke="none"/>
|
||||
<circle cx="30" cy="30" r="29" fill="none"/>
|
||||
</g>
|
||||
<path id="Tracé_3192" data-name="Tracé 3192" d="M0,17.266,10.682,8.633,0,0" transform="translate(24.723 21.303)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 564 B |
|
|
@ -1,7 +1,46 @@
|
|||
.swiper {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: green;
|
||||
.swiper-content {
|
||||
@apply px-24 relative max-w-screen-2xl;
|
||||
}
|
||||
.swiper-container {
|
||||
height: auto;
|
||||
@apply px-3 overflow-hidden;
|
||||
/* @apply bg-yellow-50; */
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply pt-24 pb-16 w-full;
|
||||
}
|
||||
|
||||
.thematique-button-next,
|
||||
.thematique-button-prev {
|
||||
@apply absolute top-1/2 z-50 opacity-80;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply opacity-100;
|
||||
filter: invert(13%) sepia(71%) saturate(4425%)
|
||||
hue-rotate(338deg) brightness(109%) contrast(117%);
|
||||
}
|
||||
&:focus {
|
||||
@apply rounded-full;
|
||||
}
|
||||
}
|
||||
.thematique-button-next {
|
||||
@apply right-0 transform;
|
||||
}
|
||||
.thematique-button-prev {
|
||||
@apply left-0;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
@apply w-3 h-3 mx-2 opacity-100 bg-white !border-2 !border-solid border-black opacity-80;
|
||||
}
|
||||
.swiper-pagination-bullet:focus {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
@apply bg-secondary !border-secondary opacity-100;
|
||||
}
|
||||
|
||||
/* .swiper-slide {
|
||||
|
|
@ -21,7 +60,7 @@
|
|||
object-fit: cover;
|
||||
} */
|
||||
.section-show-thematiques {
|
||||
@apply pt-8 pb-32;
|
||||
@apply pt-8 pb-32 px-16;
|
||||
.thematiques-container {
|
||||
@apply grid
|
||||
grid-cols-3
|
||||
|
|
|
|||
|
|
@ -1,9 +1,34 @@
|
|||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
mySwiper = new Swiper('.swiper', {
|
||||
grabCursor: true,
|
||||
slidesPerView: 2,
|
||||
const cardThematiques = document.querySelectorAll(
|
||||
'.swiper-slide .card-thematique'
|
||||
);
|
||||
console.log(`cardThematiques`, cardThematiques);
|
||||
|
||||
mySwiper = new Swiper('.swiper-container', {
|
||||
grabCursor: false,
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
// centeredSlides: true,
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.thematique-button-next',
|
||||
prevEl: '.thematique-button-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
const ariaLabel =
|
||||
cardThematiques[index].getAttribute(
|
||||
'data-taxonomy'
|
||||
);
|
||||
|
||||
return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
|
||||
},
|
||||
},
|
||||
a11y: false,
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,36 +15,67 @@ $terms = get_terms(array(
|
|||
|
||||
<section class="section-show-thematiques">
|
||||
|
||||
<!-- Slider main container -->
|
||||
<div class="swiper">
|
||||
<!-- Additional required wrapper -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
<div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div>
|
||||
...
|
||||
</div>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- If we need navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
|
||||
|
||||
<!-- If we need scrollbar -->
|
||||
<div class="swiper-scrollbar"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section_titling">
|
||||
<h2 class="section_titling__title"><?php echo $block_titling_datas['title'] ?></h2>
|
||||
<h3 class="section_titling__subtitle"><?php echo $block_titling_datas['subtitle'] ?></h3>
|
||||
</div>
|
||||
|
||||
<div class="thematiques-container">
|
||||
<div class="swiper-content">
|
||||
<button class="thematique-button-prev" aria-label="Thématique précédente">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/slider-next-left.svg' alt=''>
|
||||
</button>
|
||||
<button class="thematique-button-next" aria-label="Thématique suivante">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/slider-next-right.svg' alt=''>
|
||||
</button>
|
||||
|
||||
<!-- Slider main container -->
|
||||
<div class="swiper-container">
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- Additional required wrapper -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
<!-- <div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div> -->
|
||||
|
||||
<?php foreach ($terms as $term) : ?>
|
||||
<div class="swiper-slide">
|
||||
<?php
|
||||
|
||||
|
||||
|
||||
get_template_part(
|
||||
'template-components/card-thematique',
|
||||
null,
|
||||
array(
|
||||
'thematique' => $term,
|
||||
'post_ID' => $post_datas->ID,
|
||||
'post_title' => $post_datas->post_title,
|
||||
'post_excerpt' => $post_datas->post_excerpt,
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- scrollbar -->
|
||||
<!-- <div class="swiper-scrollbar"></div> -->
|
||||
</div>
|
||||
<!-- If we need navigation buttons -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="thematiques-container">
|
||||
<?php foreach ($terms as $term) : ?>
|
||||
<?php
|
||||
<?php
|
||||
|
||||
|
||||
|
||||
|
|
@ -63,6 +94,6 @@ $terms = get_terms(array(
|
|||
<?php endforeach; ?>
|
||||
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</section>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.card-thematique {
|
||||
@apply flex flex-col p-8 rounded-3xl relative;
|
||||
@apply flex flex-col p-8 rounded-3xl relative bg-white;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $taxonomy_picture = get_field('taxonomy_pictures', $thematique);
|
|||
$color = getThematiqueFamilySlug($thematique->slug);
|
||||
|
||||
?>
|
||||
<div class="card-thematique card-<?php echo $thematique->slug ?>">
|
||||
<div class="card-thematique card-<?php echo $thematique->slug ?>" data-taxonomy="<?php echo $thematique->slug ?>">
|
||||
<img class="card-thematique__thumbnail" src="<?php echo $taxonomy_picture['illustration_s']['sizes']['medium'] ?>" alt="">
|
||||
<h4 class="card-thematique__title text-<?php echo getThematiqueFamilySlug($thematique->slug) ?>"><?php echo $thematique->name ?></h4>
|
||||
<p class="card-thematique__description"><?php echo $thematique->description ?></p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user