Clickfunnels Basic Slider

01- Clickfunnels Basic Slider.md

Introduction

This code will help you to add an interactive slider to any of your Clickfunnels pages.

Instructions

You can watch the video on this link: https://www.facebook.com/christoforocros/videos/2044026535810723/ to learn how to install the code and get your slider up and running!

02-cf-basic-slider.js

/**
 * Clickfunnels Basic Slider Code
 *
 * Author: Christian Cisneros
 *
 * Website: https://christiancisneros.me
 */

if (screen.width >= 640) { // Not execute for mobile devices
    var $sliders = $('[data-title~=slider-tabs]');

    $sliders.each(function(i) {
        var $currentSlider = $(this);
        var $sliderTabs = $currentSlider.children();
        var $slides = $currentSlider.parent().find('[data-title~=slider-slide]');
        var $currentSlide = $currentSlider.parent().find('[data-title~=1st-slide]');

        $slides.hide();
        $currentSlide.show();

        $sliderTabs.click(function(e) {
            var clickedTab = $(this).attr('data-title').slice(0, 3);
            var $slideToShow = $currentSlider.parent().find('[data-title~=' + clickedTab + '-slide]');

            $currentSlide.hide();
            $slideToShow.fadeIn('fast');

            $currentSlide = $slideToShow;
        });
    });
}