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] {
.carousel {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
margin-right: calc((100% - 100vw) / 2);
left: 0 !important;
min-height: 340px !important;
}
......@@ -15220,6 +15221,7 @@ input[type=checkbox] {
.carousel {
width: 95%;
margin-left: 0px;
margin-right: 0px;
}
}
.carousel .swiper-button-next {
......@@ -15236,46 +15238,47 @@ input[type=checkbox] {
.carousel .swiper-pagination {
bottom: -20px !important;
}
.carousel .carousel-items {
margin-left: 1.75rem;
}
.carousel .swiper-wrapper {
gap: 1rem;
}
@media only screen and (max-width: 768px) {
.cert-carousel {
margin-left: 0px !important;
}
.cert-cont {
background-color: #e2f2f9;
margin: 40px -50%;
padding: 40px 50%;
}
.cert-carousel .swiper-slide {
width: 100% !important;
width: calc(33% - 40px) !important;
}
@media only screen and (max-width: 768px) {
.cert-carousel .swiper-slide {
width: 100% !important;
width: calc(100% - 0rem) !important;
padding-left: 0px;
}
}
.cert-carousel .swiper-slide .cert-cont {
background-color: #e2f2f9;
margin-left: -50%;
margin-right: -50%;
padding-left: 50%;
padding-right: 50%;
}
.cert-carousel .swiper-slide .cert_link {
display: block;
width: 300px;
height: 232px;
width: 100%;
height: auto;
background-size: contain;
text-decoration: none;
font-size: 10px;
margin: auto;
text-align: center;
padding-top: 100px;
position: relative;
color: #156570;
}
.cert-carousel .swiper-slide .cert_link img {
opacity: 0;
width: 100%;
height: auto;
}
.cert-carousel .swiper-slide .cert_link .cert-text {
position: absolute;
top: 50%;
width: 100%;
}
.cert-carousel .swiper-slide .cert_link p {
line-height: 10px;
color: #156570;
......@@ -15283,6 +15286,15 @@ input[type=checkbox] {
.cert-carousel .swiper-slide .cert_link p strong {
color: #156570;
}
.cert-carousel .swiper-button-next {
right: 30px !important;
}
.cert-carousel .swiper-button-prev {
left: 7px !important;
}
.cert-carousel .swiper-pagination {
bottom: -25px !important;
}
@media only screen and (max-width: 768px) {
.testimonials-carousel {
......@@ -15437,16 +15449,26 @@ input[type=checkbox] {
.course-carousel {
width: 100% !important;
margin-left: 0px !important;
position: relative;
}
@media only screen and (min-width: 1400px) {
.course-carousel {
max-width: 100% !important;
}
overflow: hidden;
margin: auto;
}
.course-carousel .swiper-wrapper {
margin: auto;
min-height: 620px;
}
.course-carousel .swiper-slide {
width: calc(33.33% - 30px) !important;
}
@media only screen and (max-width: 1000px) {
.course-carousel .swiper-slide {
width: calc(50% - 30px) !important;
}
}
@media only screen and (max-width: 768px) {
.course-carousel .swiper-slide {
width: calc(100% - 30px) !important;
}
}
.course-carousel .card {
min-height: 540px;
......@@ -15458,7 +15480,7 @@ input[type=checkbox] {
left: 7px !important;
}
.course-carousel .swiper-pagination {
bottom: -40px !important;
bottom: 0px !important;
}
.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());
if (is_array($enrolled_courses)): ?>
<div class="carousel course">
<div id="<?php echo $uniqid; ?>" class="course-carousel carousel-items">
<div class='swiper-wrapper container'>
<div id="<?php echo $uniqid; ?>" class="course-carousel carousel-items container">
<div class='swiper-wrapper'>
<?php foreach($enrolled_courses as $enrolled){
echo course_card($enrolled);
}; ?>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev" data-id="<?= $uniqid; ?>"></div>
<div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
</div>
</div>
<?php endif;
wp_reset_query();
......
......@@ -127,18 +127,18 @@ function certs(){
if (is_array($enrolled_courses)):?>
<div class="carousel">
<div id="cert" class="cert-carousel carousel-items">
<div id="cert" class="cert-carousel carousel-items container">
<div class='swiper-wrapper'>
<?php foreach($enrolled_courses as $enrolled_course){
$cert = learndash_get_course_certificate_link($enrolled_course, get_current_user_id());
if(!empty($cert)){
$sfwd_course = get_post_meta($enrolled_course , '_sfwd-courses', true );
$thumbnail_id = "911"; ?>
<div class="swiper-slide container">
<div class="swiper-slide">
<div class="cert">
<?php echo '<a target="_blank" style="background-image:url('.wp_get_attachment_url( $thumbnail_id).')" class="cert_link" href="'.$cert.'"><p><strong>'
<?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>'
.get_user_meta(get_current_user_id(), 'first_name', true )." ". get_user_meta(get_current_user_id(), 'last_name', true ).'</strong></p>'
.get_the_title( $enrolled_course ).'</a>';
.get_the_title( $enrolled_course ).'</div></a>';
?>
</div>
</div>
......
......@@ -32970,7 +32970,7 @@
jQuery(document).ready(function ($) {
jQuery('.carousel-items').each(function () {
var offset = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
var offsetAfter = 0;
var offsetAfter = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
var PerView = 'auto';
var space = 20;
var SlidesPerGroup = 1;
......@@ -32986,24 +32986,24 @@
if (jQuery(this).hasClass('course-carousel')) {
offset = 0;
PerView = 3;
space = 45;
space = 30;
SlidesPerGroup = 1;
offsetAfter = 0;
_id = jQuery(this).attr('id');
}
if (jQuery(this).hasClass('cert-carousel')) {
offset = 0;
offset = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
PerView = 3;
space = 40;
SlidesPerGroup = 1;
offsetAfter = 0;
offsetAfter = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
_id = jQuery(this).attr('id');
}
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
SlidesPerGroup = 0;
space = 40;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
}
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($) {
jQuery('.carousel-items').each(function() {
var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var offsetAfter = 0;
var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var PerView = 'auto';
var space = 20;
var SlidesPerGroup= 1;
......@@ -37,20 +37,20 @@ jQuery(document).ready(function($) {
if (jQuery(this).hasClass('course-carousel')) {
offset =0;
offset = 0;
PerView = 3;
space = 45;
space = 30;
SlidesPerGroup = 1;
offsetAfter = 0;
_id = jQuery(this).attr('id');
}
if (jQuery(this).hasClass('cert-carousel')) {
offset = 0;
offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
PerView = 3;
space = 40;
SlidesPerGroup = 1;
offsetAfter = 0;
offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
_id = jQuery(this).attr('id');
}
......@@ -58,8 +58,8 @@ jQuery(document).ready(function($) {
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
SlidesPerGroup = 0;
space = 40;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
}
......
......@@ -44,9 +44,11 @@
.carousel {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
margin-right: calc((100% - 100vw) / 2);
@media only screen and (max-width: 768px) {
width: 95%;
margin-left: 0px;
margin-right: 0px;
}
left: 0 !important;
min-height: 340px !important;
......@@ -63,43 +65,50 @@
bottom: -20px !important;
}
.carousel-items {
margin-left: 1.75rem;
}
.swiper-wrapper {
gap: 1rem;
}
}
.cert-cont {
background-color: #e2f2f9;
margin: 40px -50%;
padding: 40px 50%;
}
.cert-carousel {
@media only screen and (max-width: 768px) {
margin-left: 0px !important;
}
.swiper-slide {
width: 100% !important;
width: calc(33% - 40px) !important;
@media only screen and (max-width: 768px) {
width: 100% !important;
width: calc(100% - 0rem) !important;
padding-left: 0px;
}
.cert-cont {
background-color: #e2f2f9;
margin-left: -50%;
margin-right: -50%;
padding-left: 50%;
padding-right: 50%;
}
.cert_link {
display: block;
width: 300px;
height: 232px;
width: 100%;
height: auto;
background-size: contain;
text-decoration: none;
font-size: 10px;
margin: auto;
text-align: center;
padding-top: 100px;
position:relative;
color: #156570;
img{
opacity: 0;
width: 100%;
height: auto;
}
.cert-text{
position: absolute;
top: 50%;
width: 100%;
}
p {
line-height: 10px;
color: #156570;
......@@ -109,6 +118,15 @@
}
}
}
.swiper-button-next {
right: 30px !important;
}
.swiper-button-prev {
left: 7px !important;
}
.swiper-pagination {
bottom: -25px !important;
}
}
// testimonials carousel css
......@@ -273,17 +291,22 @@
.course-carousel {
width: 100% !important;
margin-left: 0px !important;
position: relative;
@media only screen and (min-width: 1400px) {
max-width: 100% !important;
}
overflow: hidden;
margin: auto;
.swiper-wrapper {
// max-width: 1344px;
margin: auto;
min-height: 620px;
}
.swiper-slide {
width: calc(33.33% - 30px) !important;
@media only screen and (max-width: 1000px) {
width: calc(50% - 30px) !important;
}
@media only screen and (max-width: 768px) {
width: calc(100% - 30px) !important;
}
}
.card {
min-height: 540px;
......@@ -295,6 +318,6 @@
left: 7px !important;
}
.swiper-pagination {
bottom: -40px !important;
bottom: 0px !important;
}
}
......