Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
2f6540c6 by Jeff Balicki
Options

sliders 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent f4d8be57
Inline Side-by-side
Showing 12 changed files with 117 additions and 70 deletions
...@@ -15213,6 +15213,7 @@ input[type=checkbox] { ...@@ -15213,6 +15213,7 @@ input[type=checkbox] {
15213 .carousel { 15213 .carousel {
15214 width: 100vw; 15214 width: 100vw;
15215 margin-left: calc((100% - 100vw) / 2); 15215 margin-left: calc((100% - 100vw) / 2);
15216 margin-right: calc((100% - 100vw) / 2);
15216 left: 0 !important; 15217 left: 0 !important;
15217 min-height: 340px !important; 15218 min-height: 340px !important;
15218 } 15219 }
...@@ -15220,6 +15221,7 @@ input[type=checkbox] { ...@@ -15220,6 +15221,7 @@ input[type=checkbox] {
15220 .carousel { 15221 .carousel {
15221 width: 95%; 15222 width: 95%;
15222 margin-left: 0px; 15223 margin-left: 0px;
15224 margin-right: 0px;
15223 } 15225 }
15224 } 15226 }
15225 .carousel .swiper-button-next { 15227 .carousel .swiper-button-next {
...@@ -15236,46 +15238,47 @@ input[type=checkbox] { ...@@ -15236,46 +15238,47 @@ input[type=checkbox] {
15236 .carousel .swiper-pagination { 15238 .carousel .swiper-pagination {
15237 bottom: -20px !important; 15239 bottom: -20px !important;
15238 } 15240 }
15239 .carousel .carousel-items {
15240 margin-left: 1.75rem;
15241 }
15242 .carousel .swiper-wrapper { 15241 .carousel .swiper-wrapper {
15243 gap: 1rem; 15242 gap: 1rem;
15244 } 15243 }
15245 15244
15246 @media only screen and (max-width: 768px) { 15245 .cert-cont {
15247 .cert-carousel { 15246 background-color: #e2f2f9;
15248 margin-left: 0px !important; 15247 margin: 40px -50%;
15249 } 15248 padding: 40px 50%;
15250 } 15249 }
15250
15251 .cert-carousel .swiper-slide { 15251 .cert-carousel .swiper-slide {
15252 width: 100% !important; 15252 width: calc(33% - 40px) !important;
15253 } 15253 }
15254 @media only screen and (max-width: 768px) { 15254 @media only screen and (max-width: 768px) {
15255 .cert-carousel .swiper-slide { 15255 .cert-carousel .swiper-slide {
15256 width: 100% !important; 15256 width: calc(100% - 0rem) !important;
15257 padding-left: 0px; 15257 padding-left: 0px;
15258 } 15258 }
15259 } 15259 }
15260 .cert-carousel .swiper-slide .cert-cont {
15261 background-color: #e2f2f9;
15262 margin-left: -50%;
15263 margin-right: -50%;
15264 padding-left: 50%;
15265 padding-right: 50%;
15266 }
15267 .cert-carousel .swiper-slide .cert_link { 15260 .cert-carousel .swiper-slide .cert_link {
15268 display: block; 15261 display: block;
15269 width: 300px; 15262 width: 100%;
15270 height: 232px; 15263 height: auto;
15271 background-size: contain; 15264 background-size: contain;
15272 text-decoration: none; 15265 text-decoration: none;
15273 font-size: 10px; 15266 font-size: 10px;
15274 margin: auto; 15267 margin: auto;
15275 text-align: center; 15268 text-align: center;
15276 padding-top: 100px; 15269 position: relative;
15277 color: #156570; 15270 color: #156570;
15278 } 15271 }
15272 .cert-carousel .swiper-slide .cert_link img {
15273 opacity: 0;
15274 width: 100%;
15275 height: auto;
15276 }
15277 .cert-carousel .swiper-slide .cert_link .cert-text {
15278 position: absolute;
15279 top: 50%;
15280 width: 100%;
15281 }
15279 .cert-carousel .swiper-slide .cert_link p { 15282 .cert-carousel .swiper-slide .cert_link p {
15280 line-height: 10px; 15283 line-height: 10px;
15281 color: #156570; 15284 color: #156570;
...@@ -15283,6 +15286,15 @@ input[type=checkbox] { ...@@ -15283,6 +15286,15 @@ input[type=checkbox] {
15283 .cert-carousel .swiper-slide .cert_link p strong { 15286 .cert-carousel .swiper-slide .cert_link p strong {
15284 color: #156570; 15287 color: #156570;
15285 } 15288 }
15289 .cert-carousel .swiper-button-next {
15290 right: 30px !important;
15291 }
15292 .cert-carousel .swiper-button-prev {
15293 left: 7px !important;
15294 }
15295 .cert-carousel .swiper-pagination {
15296 bottom: -25px !important;
15297 }
15286 15298
15287 @media only screen and (max-width: 768px) { 15299 @media only screen and (max-width: 768px) {
15288 .testimonials-carousel { 15300 .testimonials-carousel {
...@@ -15437,16 +15449,26 @@ input[type=checkbox] { ...@@ -15437,16 +15449,26 @@ input[type=checkbox] {
15437 15449
15438 .course-carousel { 15450 .course-carousel {
15439 width: 100% !important; 15451 width: 100% !important;
15440 margin-left: 0px !important;
15441 position: relative; 15452 position: relative;
15442 } 15453 overflow: hidden;
15443 @media only screen and (min-width: 1400px) { 15454 margin: auto;
15444 .course-carousel {
15445 max-width: 100% !important;
15446 }
15447 } 15455 }
15448 .course-carousel .swiper-wrapper { 15456 .course-carousel .swiper-wrapper {
15449 margin: auto; 15457 margin: auto;
15458 min-height: 620px;
15459 }
15460 .course-carousel .swiper-slide {
15461 width: calc(33.33% - 30px) !important;
15462 }
15463 @media only screen and (max-width: 1000px) {
15464 .course-carousel .swiper-slide {
15465 width: calc(50% - 30px) !important;
15466 }
15467 }
15468 @media only screen and (max-width: 768px) {
15469 .course-carousel .swiper-slide {
15470 width: calc(100% - 30px) !important;
15471 }
15450 } 15472 }
15451 .course-carousel .card { 15473 .course-carousel .card {
15452 min-height: 540px; 15474 min-height: 540px;
...@@ -15458,7 +15480,7 @@ input[type=checkbox] { ...@@ -15458,7 +15480,7 @@ input[type=checkbox] {
15458 left: 7px !important; 15480 left: 7px !important;
15459 } 15481 }
15460 .course-carousel .swiper-pagination { 15482 .course-carousel .swiper-pagination {
15461 bottom: -40px !important; 15483 bottom: 0px !important;
15462 } 15484 }
15463 15485
15464 .c-accordion__title:after { 15486 .c-accordion__title:after {
......
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.
...@@ -60,16 +60,18 @@ $enrolled_courses = learndash_user_get_enrolled_courses(get_current_user_id()); ...@@ -60,16 +60,18 @@ $enrolled_courses = learndash_user_get_enrolled_courses(get_current_user_id());
60 60
61 if (is_array($enrolled_courses)): ?> 61 if (is_array($enrolled_courses)): ?>
62 <div class="carousel course"> 62 <div class="carousel course">
63 <div id="<?php echo $uniqid; ?>" class="course-carousel carousel-items"> 63 <div id="<?php echo $uniqid; ?>" class="course-carousel carousel-items container">
64 <div class='swiper-wrapper container'> 64 <div class='swiper-wrapper'>
65 <?php foreach($enrolled_courses as $enrolled){ 65 <?php foreach($enrolled_courses as $enrolled){
66 echo course_card($enrolled); 66 echo course_card($enrolled);
67 }; ?> 67 }; ?>
68 </div> 68 </div>
69 <div class="swiper-pagination"></div> 69 <div class="swiper-pagination"></div>
70 </div>
71
70 <div class="swiper-button-prev" data-id="<?= $uniqid; ?>"></div> 72 <div class="swiper-button-prev" data-id="<?= $uniqid; ?>"></div>
71 <div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div> 73 <div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
72 </div> 74
73 </div> 75 </div>
74 <?php endif; 76 <?php endif;
75 wp_reset_query(); 77 wp_reset_query();
......
...@@ -127,18 +127,18 @@ function certs(){ ...@@ -127,18 +127,18 @@ function certs(){
127 if (is_array($enrolled_courses)):?> 127 if (is_array($enrolled_courses)):?>
128 128
129 <div class="carousel"> 129 <div class="carousel">
130 <div id="cert" class="cert-carousel carousel-items"> 130 <div id="cert" class="cert-carousel carousel-items container">
131 <div class='swiper-wrapper'> 131 <div class='swiper-wrapper'>
132 <?php foreach($enrolled_courses as $enrolled_course){ 132 <?php foreach($enrolled_courses as $enrolled_course){
133 $cert = learndash_get_course_certificate_link($enrolled_course, get_current_user_id()); 133 $cert = learndash_get_course_certificate_link($enrolled_course, get_current_user_id());
134 if(!empty($cert)){ 134 if(!empty($cert)){
135 $sfwd_course = get_post_meta($enrolled_course , '_sfwd-courses', true ); 135 $sfwd_course = get_post_meta($enrolled_course , '_sfwd-courses', true );
136 $thumbnail_id = "911"; ?> 136 $thumbnail_id = "911"; ?>
137 <div class="swiper-slide container"> 137 <div class="swiper-slide">
138 <div class="cert"> 138 <div class="cert">
139 <?php echo '<a target="_blank" style="background-image:url('.wp_get_attachment_url( $thumbnail_id).')" class="cert_link" href="'.$cert.'"><p><strong>' 139 <?php echo '<a target="_blank" style="background-image:url('.wp_get_attachment_url( $thumbnail_id).')" class="cert_link" href="'.$cert.'">'. wp_get_attachment_image($thumbnail_id,'medium' ).'<div class="cert-text"><p><strong>'
140 .get_user_meta(get_current_user_id(), 'first_name', true )." ". get_user_meta(get_current_user_id(), 'last_name', true ).'</strong></p>' 140 .get_user_meta(get_current_user_id(), 'first_name', true )." ". get_user_meta(get_current_user_id(), 'last_name', true ).'</strong></p>'
141 .get_the_title( $enrolled_course ).'</a>'; 141 .get_the_title( $enrolled_course ).'</div></a>';
142 ?> 142 ?>
143 </div> 143 </div>
144 </div> 144 </div>
......
...@@ -32970,7 +32970,7 @@ ...@@ -32970,7 +32970,7 @@
32970 jQuery(document).ready(function ($) { 32970 jQuery(document).ready(function ($) {
32971 jQuery('.carousel-items').each(function () { 32971 jQuery('.carousel-items').each(function () {
32972 var offset = (window.innerWidth - $('.entry-content').width()) / 2 - 28; 32972 var offset = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
32973 var offsetAfter = 0; 32973 var offsetAfter = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
32974 var PerView = 'auto'; 32974 var PerView = 'auto';
32975 var space = 20; 32975 var space = 20;
32976 var SlidesPerGroup = 1; 32976 var SlidesPerGroup = 1;
...@@ -32986,24 +32986,24 @@ ...@@ -32986,24 +32986,24 @@
32986 if (jQuery(this).hasClass('course-carousel')) { 32986 if (jQuery(this).hasClass('course-carousel')) {
32987 offset = 0; 32987 offset = 0;
32988 PerView = 3; 32988 PerView = 3;
32989 space = 45; 32989 space = 30;
32990 SlidesPerGroup = 1; 32990 SlidesPerGroup = 1;
32991 offsetAfter = 0; 32991 offsetAfter = 0;
32992 _id = jQuery(this).attr('id'); 32992 _id = jQuery(this).attr('id');
32993 } 32993 }
32994 if (jQuery(this).hasClass('cert-carousel')) { 32994 if (jQuery(this).hasClass('cert-carousel')) {
32995 offset = 0; 32995 offset = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
32996 PerView = 3; 32996 PerView = 3;
32997 space = 40; 32997 space = 40;
32998 SlidesPerGroup = 1; 32998 SlidesPerGroup = 1;
32999 offsetAfter = 0; 32999 offsetAfter = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
33000 _id = jQuery(this).attr('id'); 33000 _id = jQuery(this).attr('id');
33001 } 33001 }
33002 if ($(window).width() < 600) { 33002 if ($(window).width() < 600) {
33003 offset = 0; 33003 offset = 0;
33004 PerView = 1; 33004 PerView = 1;
33005 SlidesPerGroup = 0; 33005 SlidesPerGroup = 1;
33006 space = 40; 33006 space = 0;
33007 offsetAfter = 0; 33007 offsetAfter = 0;
33008 } 33008 }
33009 var swiper_params = { 33009 var swiper_params = {
......
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.
...@@ -17,7 +17,7 @@ jQuery(document).ready(function($) { ...@@ -17,7 +17,7 @@ jQuery(document).ready(function($) {
17 jQuery('.carousel-items').each(function() { 17 jQuery('.carousel-items').each(function() {
18 18
19 var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28; 19 var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
20 var offsetAfter = 0; 20 var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
21 var PerView = 'auto'; 21 var PerView = 'auto';
22 var space = 20; 22 var space = 20;
23 var SlidesPerGroup= 1; 23 var SlidesPerGroup= 1;
...@@ -37,20 +37,20 @@ jQuery(document).ready(function($) { ...@@ -37,20 +37,20 @@ jQuery(document).ready(function($) {
37 37
38 38
39 if (jQuery(this).hasClass('course-carousel')) { 39 if (jQuery(this).hasClass('course-carousel')) {
40 offset =0; 40 offset = 0;
41 PerView = 3; 41 PerView = 3;
42 space = 45; 42 space = 30;
43 SlidesPerGroup = 1; 43 SlidesPerGroup = 1;
44 offsetAfter = 0; 44 offsetAfter = 0;
45 _id = jQuery(this).attr('id'); 45 _id = jQuery(this).attr('id');
46 } 46 }
47 47
48 if (jQuery(this).hasClass('cert-carousel')) { 48 if (jQuery(this).hasClass('cert-carousel')) {
49 offset = 0; 49 offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
50 PerView = 3; 50 PerView = 3;
51 space = 40; 51 space = 40;
52 SlidesPerGroup = 1; 52 SlidesPerGroup = 1;
53 offsetAfter = 0; 53 offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
54 _id = jQuery(this).attr('id'); 54 _id = jQuery(this).attr('id');
55 } 55 }
56 56
...@@ -58,8 +58,8 @@ jQuery(document).ready(function($) { ...@@ -58,8 +58,8 @@ jQuery(document).ready(function($) {
58 if ($(window).width() < 600) { 58 if ($(window).width() < 600) {
59 offset = 0; 59 offset = 0;
60 PerView = 1; 60 PerView = 1;
61 SlidesPerGroup = 0; 61 SlidesPerGroup = 1;
62 space = 40; 62 space = 0;
63 offsetAfter = 0; 63 offsetAfter = 0;
64 64
65 } 65 }
......
...@@ -44,9 +44,11 @@ ...@@ -44,9 +44,11 @@
44 .carousel { 44 .carousel {
45 width: 100vw; 45 width: 100vw;
46 margin-left: calc((100% - 100vw) / 2); 46 margin-left: calc((100% - 100vw) / 2);
47 margin-right: calc((100% - 100vw) / 2);
47 @media only screen and (max-width: 768px) { 48 @media only screen and (max-width: 768px) {
48 width: 95%; 49 width: 95%;
49 margin-left: 0px; 50 margin-left: 0px;
51 margin-right: 0px;
50 } 52 }
51 left: 0 !important; 53 left: 0 !important;
52 min-height: 340px !important; 54 min-height: 340px !important;
...@@ -63,43 +65,50 @@ ...@@ -63,43 +65,50 @@
63 bottom: -20px !important; 65 bottom: -20px !important;
64 } 66 }
65 .carousel-items { 67 .carousel-items {
66 margin-left: 1.75rem; 68
67 } 69 }
68 .swiper-wrapper { 70 .swiper-wrapper {
69 gap: 1rem; 71 gap: 1rem;
70 } 72 }
71 } 73 }
72 74
75 .cert-cont {
76 background-color: #e2f2f9;
77 margin: 40px -50%;
78 padding: 40px 50%;
79 }
80
73 .cert-carousel { 81 .cert-carousel {
74 @media only screen and (max-width: 768px) { 82 @media only screen and (max-width: 768px) {
75 margin-left: 0px !important; 83
76 } 84 }
77 .swiper-slide { 85 .swiper-slide {
78 width: 100% !important; 86 width: calc(33% - 40px) !important;
79 @media only screen and (max-width: 768px) { 87 @media only screen and (max-width: 768px) {
80 width: 100% !important; 88 width: calc(100% - 0rem) !important;
81 padding-left: 0px; 89 padding-left: 0px;
82 } 90 }
83
84 .cert-cont {
85 background-color: #e2f2f9;
86 margin-left: -50%;
87 margin-right: -50%;
88 padding-left: 50%;
89 padding-right: 50%;
90 }
91
92 .cert_link { 91 .cert_link {
93 display: block; 92 display: block;
94 width: 300px; 93 width: 100%;
95 height: 232px; 94 height: auto;
96 background-size: contain; 95 background-size: contain;
97 text-decoration: none; 96 text-decoration: none;
98 font-size: 10px; 97 font-size: 10px;
99 margin: auto; 98 margin: auto;
100 text-align: center; 99 text-align: center;
101 padding-top: 100px; 100 position:relative;
102 color: #156570; 101 color: #156570;
102 img{
103 opacity: 0;
104 width: 100%;
105 height: auto;
106 }
107 .cert-text{
108 position: absolute;
109 top: 50%;
110 width: 100%;
111 }
103 p { 112 p {
104 line-height: 10px; 113 line-height: 10px;
105 color: #156570; 114 color: #156570;
...@@ -109,6 +118,15 @@ ...@@ -109,6 +118,15 @@
109 } 118 }
110 } 119 }
111 } 120 }
121 .swiper-button-next {
122 right: 30px !important;
123 }
124 .swiper-button-prev {
125 left: 7px !important;
126 }
127 .swiper-pagination {
128 bottom: -25px !important;
129 }
112 } 130 }
113 131
114 // testimonials carousel css 132 // testimonials carousel css
...@@ -273,17 +291,22 @@ ...@@ -273,17 +291,22 @@
273 291
274 .course-carousel { 292 .course-carousel {
275 width: 100% !important; 293 width: 100% !important;
276 margin-left: 0px !important;
277 position: relative; 294 position: relative;
278 @media only screen and (min-width: 1400px) { 295 overflow: hidden;
279 max-width: 100% !important; 296 margin: auto;
280 } 297
281 .swiper-wrapper { 298 .swiper-wrapper {
282 // max-width: 1344px;
283 margin: auto; 299 margin: auto;
300 min-height: 620px;
284 } 301 }
285 .swiper-slide { 302 .swiper-slide {
286 303 width: calc(33.33% - 30px) !important;
304 @media only screen and (max-width: 1000px) {
305 width: calc(50% - 30px) !important;
306 }
307 @media only screen and (max-width: 768px) {
308 width: calc(100% - 30px) !important;
309 }
287 } 310 }
288 .card { 311 .card {
289 min-height: 540px; 312 min-height: 540px;
...@@ -295,6 +318,6 @@ ...@@ -295,6 +318,6 @@
295 left: 7px !important; 318 left: 7px !important;
296 } 319 }
297 .swiper-pagination { 320 .swiper-pagination {
298 bottom: -40px !important; 321 bottom: 0px !important;
299 } 322 }
300 } 323 }
......