677dd3e1 by Jeff Balicki

slider

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 7768501f
...@@ -11,6 +11,7 @@ include 'inc/shortcodes.php'; ...@@ -11,6 +11,7 @@ include 'inc/shortcodes.php';
11 include 'inc/blocks.php'; 11 include 'inc/blocks.php';
12 include 'inc/shortcodes-resources.php'; 12 include 'inc/shortcodes-resources.php';
13 include 'inc/menu.php'; 13 include 'inc/menu.php';
14 include 'inc/shortcodes-contest.php';
14 15
15 16
16 /** 17 /**
......
1 <?php
2
3 add_shortcode('contest-slider', 'contest_slider');
4
5
6 function contest_slider(){
7
8
9 $custom_args = array(
10 'post_type' => 'nf_sub',
11 'posts_per_page' => 3,
12 'paged' => 1,
13 'post_status' => 'any',
14 'order' => 'DESC',
15 'orderby' => 'rand',
16 // 'meta_query' => array(
17 // 'relation' => 'AND',
18 // array(
19 // 'key' => '_form_id',
20 // 'value' => '2',
21 // 'compare' => '=',
22 // ),
23 // ),
24 );
25 $custom_query = new \WP_Query($custom_args);
26
27 ob_start();
28 $uniqid = uniqid();
29 if ($custom_query->have_posts()): ?>
30 <div id="<?php echo esc_attr($uniqid); ?>" class="<?php echo esc_attr($className); ?> ">
31 <div class="content-item carousel-items <?php echo $size; ?>">
32 <div class='swiper-wrapper'>
33 <?php while ($custom_query->have_posts()): $custom_query->the_post(); ?>
34 <div class="swiper-slide">
35 <?php $image = get_post_meta(get_the_ID(), '_field_11', true );
36 $num = get_post_meta(get_the_ID(), '_seq_num', true );
37 $cap = get_post_meta(get_the_ID(), '_field_8', true );
38 ?>
39 <img src="<?php echo $image[$num];?>" alt="<?php echo $cap;?>">
40 <div class="contest_cap"><?php echo $cap;?></div>
41 </div>
42 <?php endwhile; ?>
43 </div>
44 </div>
45 <div class="swiper-button-prev" data-id="<?= $uniqid ?>"></div>
46 <div class="swiper-button-next" data-id="<?= $uniqid ?>"></div>
47 </div>
48 <?php endif;
49
50 wp_reset_query();
51 $output = ob_get_clean();
52 return $output;
53
54 }
55
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -43,7 +43,9 @@ ...@@ -43,7 +43,9 @@
43 "homepage": "https://understrap.com", 43 "homepage": "https://understrap.com",
44 "dependencies": { 44 "dependencies": {
45 "datatables.net-bs5": "^1.13.2", 45 "datatables.net-bs5": "^1.13.2",
46 "jquery": "^3.6.3" 46 "jquery": "^3.6.3",
47 "rollup-plugin-postcss": "^4.0.2",
48 "swiper": "^9.0.5"
47 }, 49 },
48 "devDependencies": { 50 "devDependencies": {
49 "@babel/core": "^7.19.6", 51 "@babel/core": "^7.19.6",
...@@ -63,7 +65,7 @@ ...@@ -63,7 +65,7 @@
63 "font-awesome": "^4.7.0", 65 "font-awesome": "^4.7.0",
64 "nodemon": "^2.0.20", 66 "nodemon": "^2.0.20",
65 "npm-run-all": "^4.1.5", 67 "npm-run-all": "^4.1.5",
66 "postcss": "^8.4.18", 68 "postcss": "^8.4.21",
67 "postcss-cli": "^10.0.0", 69 "postcss-cli": "^10.0.0",
68 "postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git", 70 "postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git",
69 "rollup": "^3.2.5", 71 "rollup": "^3.2.5",
......
...@@ -9,6 +9,7 @@ const { nodeResolve } = require( '@rollup/plugin-node-resolve' ); ...@@ -9,6 +9,7 @@ const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
9 const commonjs = require( '@rollup/plugin-commonjs' ); 9 const commonjs = require( '@rollup/plugin-commonjs' );
10 const multi = require( '@rollup/plugin-multi-entry' ); 10 const multi = require( '@rollup/plugin-multi-entry' );
11 const replace = require( '@rollup/plugin-replace' ); 11 const replace = require( '@rollup/plugin-replace' );
12 const postcss = require('rollup-plugin-postcss');
12 13
13 /** 14 /**
14 * Internal dependencies 15 * Internal dependencies
...@@ -39,6 +40,9 @@ const plugins = [ ...@@ -39,6 +40,9 @@ const plugins = [
39 nodeResolve(), 40 nodeResolve(),
40 commonjs(), 41 commonjs(),
41 multi(), 42 multi(),
43 postcss({
44 plugins: []
45 })
42 ]; 46 ];
43 47
44 module.exports = { 48 module.exports = {
......
1 import Swiper, {
2 Navigation,
3 Pagination,
4 A11y,
5 Keyboard
6 } from 'swiper';
7 import 'swiper/css';
8 import 'swiper/css/navigation';
9 import 'swiper/css/pagination';
10 import 'swiper/css/keyboard';
11 import 'swiper/css/a11y';
12
13
14 jQuery(document).ready(function($) {
15
16 $('.carousel-items').each(function() {
17
18 var offset = 0,
19 PerView = 3,
20 space = 30,
21 SlidesPerGroup = 1,
22 offsetAfter = 0,
23 _id = $(this).attr('id');
24
25
26 var swiper_params = {
27 modules: [Navigation, Pagination, A11y, Keyboard],
28 slidesPerView: PerView,
29 slidesOffsetAfter: offsetAfter,
30 slidesOffsetBefore: offset,
31 spaceBetween: space,
32 slidesPerGroup: SlidesPerGroup ,
33 pagination: {
34 el: ".swiper-pagination",
35 type: 'bullets',
36 clickable: "true",
37 },
38
39 navigation: {
40 nextEl: '.swiper-button-next[data-id="' + _id + '"]',
41 prevEl: '.swiper-button-prev[data-id="' + _id + '"]',
42 },
43
44 a11y: {
45 prevSlideMessage: 'Previous slide',
46 nextSlideMessage: 'Next slide',
47 },
48 keyboard: {
49 enabled: true,
50 onlyInViewport: false,
51 },
52
53 };
54
55
56 new Swiper(this, swiper_params);
57 });
58
59 //text_change();
60 function text_change(){
61 var words = [ 'Dance', 'Smile','Party','Sing',''];
62 $.each(words, function( index, value ) {
63 setTimeout( function(){
64 $(".like-you strong").text(value);
65 if( (words.length - 1) == index){
66 text_change();
67 }
68 }, index * 1000 );
69
70 });
71 }
72
73 });
...\ No newline at end of file ...\ No newline at end of file
1 jQuery(document).ready(function($) {
2
3
4 text_change();
5 function text_change(){
6 var words = [ 'Dance', 'Smile','Party','Sing',''];
7 $.each(words, function( index, value ) {
8 setTimeout( function(){
9 $(".like-you strong").text(value);
10 if( (words.length - 1) == index){
11 // text_change();
12 }
13 }, index * 1000 );
14
15 });
16 }
17
18 });
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,6 +2,7 @@ import jQuery from 'jquery'; ...@@ -2,6 +2,7 @@ import jQuery from 'jquery';
2 import DataTable from 'datatables.net-bs5'; 2 import DataTable from 'datatables.net-bs5';
3 3
4 import "./_resources_list"; 4 import "./_resources_list";
5 import "./_contest";
5 6
6 var a = document.querySelector('.blur-image'); 7 var a = document.querySelector('.blur-image');
7 8
...@@ -21,17 +22,5 @@ document.addEventListener("DOMContentLoaded", function() { ...@@ -21,17 +22,5 @@ document.addEventListener("DOMContentLoaded", function() {
21 }); 22 });
22 23
23 jQuery(document).ready(function($) { 24 jQuery(document).ready(function($) {
24 text_change(); 25
25 function text_change(){
26 var words = [ 'Dance', 'Smile','Party','Sing',''];
27 $.each(words, function( index, value ) {
28 setTimeout( function(){
29 $(".like-you strong").text(value);
30 if( (words.length - 1) == index){
31 text_change();
32 }
33 }, index * 1000 );
34
35 });
36 }
37 }); 26 });
......