<!-- Tiny Slider JS and CSS -->
<script src="https://cdn.jsdelivr.net/npm/tiny-slider@2.9.4/dist/min/tiny-slider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiny-slider@2.9.4/dist/tiny-slider.min.css">
// Slider shortcode
// PT 2024-Mar-25
function ss_slider_shortcode($atts) {
// Extract shortcode attributes
$atts = shortcode_atts(array(
'slider_name' => 'LOCATIONS', // Default value for item_id
), $atts);
// Get the parameters passed in
$slider_name = $atts['slider_name'];
$html = '';
$nav = '';
// args
$args = array(
'posts_per_page' => -1,
'post_type' => 'slider',
'meta_key' => 'slide_type',
'meta_value' => $slider_name
);
// query
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ):
while( $the_query->have_posts() ) : $the_query->the_post();
// Slider title
$slider_title = get_field('title_to_display');
$html .= '<div class="ss-title-bar"><h2 class="slider-title">' . $slider_title .'</h2></div>';
$html .= '<div class="slider-container">';
$html .= '<ul class="controls" id="customize-controls" aria-label="Carousel Navigation" tabindex="0">';
$html .= '<li class="prev" data-controls="prev" aria-controls="customize" tabindex="-1">';
$html .= ' <p class="arrow-left">left</p>';
$html .= '</li>';
$html .= '<li class="next" data-controls="next" aria-controls="customize" tabindex="-1">';
$html .= ' <p class="arrow-right">right</p>';
$html .= '</li>';
$html .= '</ul>';
$html .= '<div class="my-slider">';
$nav .= '<ul class="ss-nav">';
if( have_rows('slides') ):
$num = 0;
while( have_rows('slides') ): the_row();
$title = get_sub_field('slide_title');
$description = get_sub_field('slide_description');
$services = get_sub_field('service_icons');
$slide_img = get_sub_field('slide_image');
$more_link = get_sub_field('more_link');
$html .= '<div class="ss-slide">';
$html .= '<div class="ss-inner">';
$html .= '<div class="ss-slide-left">';
$html .= '<img class="ss-port-image" src="' . $slide_img .'" alt="' . $title . '">';
$html .= '</div>';
$html .= '<div class="ss-slide-right">';
$html .= ' <h3>' . $title . '</h3><p>' . $description .'</p>';
$nav .= ' <li href="#" onclick="slider.goTo('. $num.');return null;">' . $title . '</li>';
// Read more link if read more present
if( $more_link ) {
$html .= '<a href="'. $more_link .'" class="more-link">read more</a>';
}
$num++;
// Display service icons
$html .= ' <ul class="ss-icons">';
$icon = '';
if( $services ):
foreach( $services as $service ):
switch ($service){
case "Bulk icon":
$icon = '/wp-content/uploads/2024/03/SS-Icon-Bulk.svg';
break;
case "Cruise icon":
$icon = '/wp-content/uploads/2024/05/SS-Icon-Cruise-Services.svg';
break;
case "Container icon":
$icon = '/wp-content/uploads/2024/03/SS-Icon-Container-services.svg';
break;
case "Cargo icon":
$icon = '/wp-content/uploads/2024/03/SS-Icon-Cargo.svg';
break;
case "Rail icon":
$icon = '/wp-content/uploads/2024/03/SS-Icon-Rail.svg';
break;
case "Ferry icon":
$icon = '/wp-content/uploads/2024/05/SS-Icon-Ferry-Services.svg';
break;
default:
$icon = '';
break;
}
$html .= ' <li><img src="' . $icon .'" alt="' . $service . '"></li>';
endforeach;
endif;
$html .= ' </ul>'; // badges
$html .= ' </div>'; // ss-slide-right
$html .= ' </div>'; // ss-inner
$html .= ' </div>'; // ss-slide
endwhile;
endif;
endwhile;
$html .= '</div>'; // all slides
$html .= '</div>'; // slider container
endif;
wp_reset_query();
$html .= $nav;
$html .= '</div>'; // slider
return $html;}
add_shortcode(‘ss_slider’, ‘ss_slider_shortcode’);
.my-slider{
background-color:#042e58;
}
.tns-controls{
position: relative;
top: 200px;
z-index: 100;
display: flex;
justify-content: space-between;
}
.ss-inner{
display: flex;
margin: 0 15%;
align-items: center;
}
.ss-slide-left{
display: flex;
justify-content: center;
width:50%;
}
.ss-slide-right{
display: flex;
width: 50%;
padding:0 0 0 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ss-port-image{
aspect-ratio: 1 / 1;
width:350px;
border-radius:50%;
}
.ss-title-bar{
padding:0;
margin:30px 0 30px 0;
}
.ss-slide{
border:0;
padding:0;
margin:0;
}
.slider-title{
color: #fff;
text-align: center;
padding:0;
margin:0;
}
.ss-slide h3{
color:#fff;
font-size: 52px;
font-weight:600!important;
margin:0;
padding:0 0 12px 0;
}
.ss-slide p{
color:#fff;
font-size:16px;
font-weight:300;
line-height:1.3;
margin:0 0 24px 0;
}
a.more-link {
font-weight: 600;
text-transform: uppercase;
font-size: 16px;
color: #3BB1E3 !important;
transition: color 300ms ease 0ms;
margin:0 0 24px 0;
}
.ss-slide .more-link:after {
content: “\e046”;
font-family: ETModules;
font-weight: 300;
vertical-align: middle;
margin-left: 5px;
}
ul.ss-nav{
list-style: none;
display: flex;
justify-content: center;
padding: 50px 0 60px 0;
margin: 0 12%;
flex-wrap: wrap;
}
.ss-nav li{
color:#3ab1e3;
font-size:17px;
font-weight:600;
}
.ss-nav li::after {
content: “\e043”;
display: inline-block;
background-position: center;
width: 32px;
height: 32px;
font-family: ‘ETmodules’;
font-weight: 300;
padding-left: 6px;
}
.ss-nav li:hover{
color:#fff;
}
ul.ss-icons{
padding:0;
margin:0;
list-style:none;
display:flex;
column-gap:12px;
}
.ss-icons li img{
width:50px;
}
.slider-container {
max-width: 100%;
padding: 0 3rem;
margin: 2rem auto 0 auto;
overflow: hidden;
position: relative;
}
.controls {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translatey(-50%);
display: flex;
align-items: center;
justify-content: space-between;
}
.controls .next:before {
font-family: ‘ETMODULES’;
content: ‘\35’;
font-size: 36px;
color: #fff;
margin-right: 7px;
vertical-align: top;
}
.controls .prev:before {
font-family: ‘ETMODULES’;
content: ‘\34’;
font-size: 36px;
color: #fff;
margin-right: 7px;
vertical-align: top;
}
.controls:focus {
outline: none;
}
.controls li:hover {
cursor: pointer;
}
@media only screen and (max-width: 800px){
.my-slider{
padding-bottom:30px;
}
.ss-inner {
flex-direction: column;
margin: 0 3% 0 3%;
}
.ss-slide h3 {
font-size: 48px;
}
.ss-icons li img {
width: 40px;
}
.ss-slide-left,
.ss-slide-right{
width:100%;
}
.ss-slide-left{
justify-content: center;
}
.ss-slide-right{
margin-top: 40px;
}
ul.ss-nav {
display:none;
padding: 0px 0 30px 0;
flex-direction: column;
align-items: center;
}
}