Hello good people.
I have inherited a website and it has an issue, and I believe that issue is to do with Slick. I have a homepage with sliders and I need to change those sliders, replacing slick with Swiper.
My testing has it sort of working, but not displaying correctly and I was wondering if you could point me in the right direction as to what bits I need to update to get rid of Slick:
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css” />
<script src=”https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js”></script>
<div class=”swiper-wrapper padding-top-100 mySwiper”>
<div class=”swiper-horizontal”>
<div class=”swiper-wrapper”>
<?php
// Check rows existexists.
if( have_rows(‘sliders’) ):
$g = 0;
$k = 0;
$l = 0;
// Loop through rows.
while( have_rows(‘sliders’) ) : the_row();
// Load sub field value.
$heading = get_sub_field(‘slider_heading’);
$style = get_sub_field(‘slider_style’);
$category = get_sub_field(‘category’);
$cta = get_sub_field(‘slider_cta’);
// colours
$highlight_color = get_sub_field(‘highlight_colour’);
$mid_tone_colour = get_sub_field(‘mid_tone_colour’);
$low_light_colour = get_sub_field(‘low_light_colour’);
$base_colour = get_sub_field(‘base_colour’);
// hovers
if($style == “Yellow”){
$filter = “#FFF1AA”;
}
if($style == “Orange”){
$filter = “#F9C09E”;
}
if($style == “Purple”){
$filter = “#E8E3FB”;
}
if($style == “Green”){
$filter = “#8DC9B7”;
}
if($style == “Grey”){
$filter = “#9d9fb3″;
}
?>
<div class=”slide-wrapper <?php echo $style; ?>”>
<span id=”slider-bg-background-<?php echo $k++; ?>” class=”slider-bg-background”></span>
<?php
?>
<div class=”heading-wrapper flex” style=”position:relative;”>
<h3><?php echo $heading; ?></h3>
</div>
<div class=”the-sliders slider-<?php echo $category[0]; ?>”>
<?php
$current_cat_id = get_query_var(‘cat’);
$showposts = 6;
$args = array(‘cat’ => $category[0], ‘orderby’ => ‘post_date’, ‘order’ => ‘DESC’, ‘posts_per_page’ => $showposts,’post_status’ => ‘publish’);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
$tags = get_the_tags();
$tagArr = [];
if ($tags) {
foreach ($tags as $tag) {
array_push($tagArr, $tag->name);
}
}
$title = get_the_title();
if (strlen($title) > 89) {
$title = substr($title, 0, 89); // limit the length to 89 characters
$last_space_pos = strrpos($title, ‘ ‘); // find the position of the last space character
if ($last_space_pos !== false) {
$title = substr($title, 0, $last_space_pos) . ‘…’; // append ‘…’ after the last complete word
} else {
$title .= ‘…’; // append ‘…’ if the string doesn’t contain any space character
}
}
?>
<div class=”swiper-slide”>
<?php include ‘wp-content/themes/mytheme/includes/tooltip.php’; ?>
<div class=”top-section”>
<?php
$logged_in_class = “”;
if ( is_user_logged_in() ) {
$logged_in_class = ‘bookmark-logged-in’;
}
?>
<button aria-label=”Add to bookmark” class=”add-to-bookmark <?php echo $logged_in_class; ?>”>
<?php include ‘wp-content/themes/mytheme/images/svg/plus.svg’; ?>
<?php include ‘wp-content/themes/mytheme/images/svg/save-resource.svg’;?>
</button>
<span class=”filter-hover” style=”background:<?php echo $filter; ?>”></span>
</div>
<a href=”<?php the_permalink(); ?>”>
<div class=”bottom-section”>
<p style=”padding-top:15px;”><?php echo $title; ?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class=”cta-wrapper”>
<a href=”<?php echo $cta[‘url’];?>” target=”<?php echo $cta[‘target’] ?>” class=”button-black” style=”display:inline-block;margin-top:25px;”><?php echo $cta[‘title’]; ?></a>
</div>
</div>
<script>
var swiper = new Swiper(“.mySwiper”, {
navigation: {
nextEl: “.swiper-button-next”,
prevEl: “.swiper-button-prev”,
},
});
</script>
<!– <script>
jQuery(‘.slider-<?php //echo $category[0]; ?>’).slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
prevArrow:”<span class=’swiper-button-prev pull-left filter’></span><button aria-label=’previous’ type=’button’ class=’slick-prev pull-left’><img width=’50’ height=’50’ alt='<‘ src=’wp-content/themes/mytheme/images/svg/arrow-left.svg’/></button>”,
nextArrow:”<span class=’swiper-button-next pull-next filter’></span><button aria-label=’next’ type=’button’ class=’slick-next pull-right’><img width=’50’ height=’50’ alt=’>’ src=’wp-content/themes/mytheme/images/svg/arrow-right.svg’/></button>”,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
arrows:true,
}
},
{
breakpoint: 600,
settings: “unslick”
},
]
});
/* VANTA.FOG({
el: “#slider-bg-backgrund-<?php //echo $l++; ?>”,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
highlightColor: 0x<?php //echo str_replace(“#”,””,$highlight_color); ?>,
midtoneColor: 0x<?php //echo str_replace(“#”,””,$mid_tone_colour); ?>,
lowlightColor: 0x<?php //echo str_replace(“#”,””,$low_light_colour); ?>,
baseColor: 0x<?php //echo str_replace(“#”,””,$base_colour); ?>,
blurFactor: 0.80,
zoom: 0.30
})*/
</script>
–>
<?php
// End loop.
endwhile;
// No value.
else :
// Do something…
endif;
?>
</div>
</div>
</div>
This is the code for the header part of the page and I’ve bastardised it to try and make it work, but I’m sure there’s something glaringly obvious that’s wrong here.
Any help would be much appreciated.
[ad_2]